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)

无法从函数访问全局变量

1 个答案: