Question

为什么“multiply”按钮只有在我将两个var置于函数中时才有效，而不是全局var？

以下是我的代码：

var first = document.getElementById("firstN").value;
var second = document.getElementById("secondN").value;

document.getElementById("multiply").addEventListener("click", function() {
  document.getElementById("answer").innerHTML = first * second;
});

<p>1st Number: <input id="firstN" type="number"></p>
<p>2nd Number: <input id="secondN" type="number"></p>
<button id="multiply">Multiply</button>
<button id="divide">Divide</button>
<p>The result is: <span id="answer"></span></p>

Answer 1

问题是，当您点击按钮时，您需要找出first和second的值。

document.getElementById("multiply").addEventListener("click", function(){
    var first = document.getElementById("firstN").value;
    var second = document.getElementById("secondN").value;
    document.getElementById("answer").innerHTML = first * second; 
});

＆＃13;

 document.getElementById("multiply").addEventListener("click", function () {
        var first = document.getElementById("firstN").value;
        var second = document.getElementById("secondN").value;
        document.getElementById("answer").innerHTML = first * second;
    });

＆＃13;

<p>1st Number: <input id="firstN" type="number"></p>
<p>2nd Number: <input id="secondN" type="number"></p>
<button id="multiply">Multiply</button>
<button id="divide">Divide</button>
<p>The result is: <span id="answer"></span></p>

＆＃13;

Answer 2

如果要从事件处理程序中创建变量first和second，则最多只选择元素（在本例中我使用document.querySelector()）。

var first = document.querySelector('#firstN');
var second = document.querySelector('#secondN');

使用document.querySelectorAll()检查答案，您可以选择多个元素一次附加click事件处理程序..并在函数处理程序中访问元素value属性在一种方法中解决乘以和除。

代码示例：

var first = document.querySelector('#firstN');
var second = document.querySelector('#secondN');
        
document
  .querySelectorAll('#multiply, #divide')
  .forEach(function (elem) {
    elem.addEventListener('click', function () {
        var result =  {
          'multiply': first.value * second.value,
          'divide': first.value / second.value
        };
        document.querySelector('#answer').innerHTML = result[elem.id];
    });
  });

<p>1st Number: <input id="firstN" type="number"></p>
<p>2nd Number: <input id="secondN" type="number"></p>
<button id="multiply">Multiply</button>
<button id="divide">Divide</button>
<p>The result is: <span id="answer"></span></p>

请注意，正如@Alexandru-Ionut Mihai所解释的那样，变量first和second的值应该在事件处理函数中赋值。

Answer 3

问题在于，当页面加载并解析时，它会存储变量first和second的值，此时此变为null。

因此，您必须在click事件中为它们声明或赋值，以便将输入值分配给变量。默认情况下，dom中的输入格式为string，因此您必须使用parseInt / parseFloat方法处理它，这会将string更改为numbers。

document.getElementById("multiply").addEventListener("click", function() {
  var first = document.getElementById("firstN").value;
  var second = document.getElementById("secondN").value;
  document.getElementById("answer").innerHTML = parseFloat(first) * parseFloat(second);
});

<p>1st Number: <input id="firstN" type="number"></p>
<p>2nd Number: <input id="secondN" type="number"></p>
<button id="multiply">Multiply</button>
<button id="divide">Divide</button>
<p>The result is: <span id="answer"></span></p>

有关详细信息，请参阅以下文章：

Answer 4

您需要在addEventListner中设置第一个和第二个的值。

＆＃13;

window.onload = function () {

    document.getElementById("multiply").addEventListener("click", function () {
        var first = document.getElementById("firstN").value;
        var second = document.getElementById("secondN").value;
        document.getElementById("answer").innerHTML = first * second;
    });
}

＆＃13;

<p>1st Number: <input id="firstN" type="number"></p>
<p>2nd Number: <input id="secondN" type="number"></p>
<button id="multiply">Multiply</button>
<button id="divide">Divide</button>
<p>The result is: <span id="answer"></span></p>

＆＃13;

如果您正在寻找不同的答案，请添加更多清晰度。

为什么addEventListener没有获得全局变量？

4 个答案: