为什么addEventListener不能获取全局变量？

Question

为什么只有我把var两个功能放在一起，而不是全局的var，为什么“multiply”按钮才起作用？

这里是我的代码：

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; 
}); 

document.getElementById("multiply").addEventListener("click", function() { 
 
     var first = document.getElementById("firstN").value; 
 
     var second = document.getElementById("secondN").value; 
 
     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 2

您需要设置第一和第二内侧addEventListner的价值。

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; 
 
    }); 
 
}

<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 3

如果您想要在事件处理程序中创建变量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 4

问题是，当页面加载并解析时，它存储变量的值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>

对于您可以参考这些文章的详细信息：

1. parseInt/parseFloat
2. string/number
3. addEventListener