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

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() {&nbsp; &nbsp; payamount1 = amount1.value;&nbsp; &nbsp; payamount2 = amount2.value;&nbsp; &nbsp; paytotal = Number(payamount1) + Number(payamount2);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; 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>