无法从函数访问全局变量

Question

我正在尝试将 numberTotal 设置为全局变量，以便我可以在 cardNum_auto 函数之外访问它。它由表单输入字段中的 onblur 触发。我需要访问它以填充底部的 URL。如果我将它全部放在函数中，它可以工作，但会创建多个按钮。

<div style="width: 100%; text-align: center; margin-top: 20px; margin-bottom: 20px;">
  <form id="golf-card-tally">
    <h3 style="margin-top: 20px; margin-bottom: 0px;">ORDER YOURS TODAY!!</h3>
    <div style="width: 400px; display: inline-block;">
      <div style="margin-bottom:10px">
        <div style="text-align:center">
          <h3>Enter Number of Cards</h3>
        </div>
        <div><input id="cardNum" type="number" onblur="cardNum_auto(this)" /></div>
      </div>
  </form>
</div>
<div id="golf-card-tally"></div>

var numberTotal;

function cardNum_auto(input) {
  numberTotal = input.value;
  console.log("numberTotal " + numberTotal + " in the function!");
}

console.log("numberTotal " + numberTotal + " out of the function!");

var golfCardDiv = document.createElement('div');
golfCardDiv.innerHTML = '<div style="width: 100%; text-align: center; margin-bottom: 20px;"><button style="border: 0px; border-radius: 18px;height:38px; width: 160px; color: white; font-weight: bold; background-color: #417505; cursor: pointer;"onclick="window.open(\'https://google.com?m=9272&amp;amount=' + numberTotal + '&amp;invoice=\')"type="submit">Submit Payment</button></div>';
var element = document.getElementById("golf-card-tally");
element.appendChild(golfCardDiv);

Answer 1

我看到的是每次输入失去焦点时都会创建一个按钮。这是因为输入保留了事件侦听器。您应该删除函数中的事件侦听器 cardNum_auto。为此，您不能从 html 调用 cardNum_auto 并在脚本中声明它。

在你的 HTML

<div><input id="cardNum" type="number"/></div>

在 JS 中

var numberTotal;

function cardNum_auto() {
    input.removeEventListener('blur',cardNum_auto)
    numberTotal = input.value;
    var golfCardDiv = document.createElement('div');
    golfCardDiv.innerHTML = '<div style="width: 100%; text-align: center; margin-bottom: 20px;"><button style="border: 0px; border-radius: 18px;height:38px; width: 160px; color: white; font-weight: bold; background-color: #417505; cursor: pointer;"onclick="window.open(\'https://google.com?m=9272&amp;amount=' + numberTotal + '&amp;invoice=\')"type="submit">Submit Payment</button></div>';
    var element = document.getElementById("golf-card-tally");
    element.appendChild(golfCardDiv);
}

let input = document.querySelector('#cardNum')
input.addEventListener('blur',cardNum_auto)

无法从函数访问全局变量

Unable to access global variable from function

javascript

variables

global

onblur