爲什麼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