由于事件侦听器，我的变量不是全局变量。我需要它们是全球性的

Question

我想为我的 Paypal Smart Button 做一个小计算。用户将在两个输入字段中填写金额，然后计算总金额，然后将此总金额用作通过我的 Paypal Smart Button 进行购买的金额。我有这段代码，这是我的基本草稿：var payamount1 = document.getElementById("amount1").value;var payamount2 = document.getElementById("amount2").value;var paytotal = +payamount1) + +payamount2);document.getElementById("payment-due").textContent = paytotal;但我必须添加一个事件监听器，以便我始终可以从输入字段中获取更新的值。添加事件监听器后，我的代码现在如下所示：document.getElementById('amount1').addEventListener('change', calc);document.getElementById('amount2').addEventListener('change', calc);function calc() {  var payamount1 = document.getElementById("amount1").value;  var payamount2 = document.getElementById("amount2").value;  var paytotal = +payamount1 + +payamount2;  document.getElementById("payment-due").textContent = paytotal;}问题是现在我所有的变量都不再是全局变量了。现在我不能在我的贝宝按钮代码中使用它们。我的 javascript 知识有限。我该如何解决这个问题？我希望能够在以下代码中使用我的变量。例如，查看我在下面的 paypal 按钮代码中使用“paytotal”变量的位置：（但由于事件监听器，我的变量不再是全局的）paypal.Buttons({    createOrder: function(data, actions) {      // This function sets up the details of the transaction, including the amount and line item details.      return actions.order.create({        purchase_units: [{          amount: {            value: paytotal          }        }]      });    }  }).render('#paypal-button-container');

Answer 1

现在我明白你的意思了，我再次为你更改了代码：只是删除了 calc-function 中的 var-declaration 并将变量声明为 global with initiliasations 为 0。

var amount1 = document.getElementById("amount1");

var amount2 = document.getElementById("amount2");

var payamount1 = 0, payamount2 = 0, paytotal=0;

amount1.addEventListener('change', calc);

amount2.addEventListener('change', calc);

function calc() {

    payamount1 = amount1.value;

    payamount2 = amount2.value;

    paytotal = Number(payamount1) + Number(payamount2);

    

    document.getElementById("payment-due").innerHTML = paytotal;

}

<input type="text" id="amount1" placeholder="enter amount 1">

<input type="text" id="amount2" placeholder="enter amount 2">

<div class="details-row">Total payable: <span id="payment-due"></span></div>