困惑VS全局變量

Question

這裏的javascript局部變量是下面的代碼：

var num1 = document.getElementById('num1').value; 
 
var num2 = document.getElementById('num2').value; 
 

 
function Multiplication (num1,num2) { 
 
    document.getElementById('result').innerHTML = num1*num2; 
 

 
} 
 
    
 
function Divide (num1,num2) { 
 
    document.getElementById('result').innerHTML = num1/num2; 
 
}

<form> 
 
    <input type="number" value="2" id="num1"/> 
 
    <input type="number" value="3" id="num2" /> 
 
    <input type="button" value="Multiplication" onClick="Multiplication()"/> 
 
    <input type="button" value="Divide" onClick="Divide()"/> 
 
</form> 
 

 
<div> 
 
    <span>The result is:</span> 
 
    <p id="result"></p> 
 
</div>

我得到的結果NAN當我點擊乘法或分割按鈕來觸發的功能，但我以爲num1和num2都是全局變量，有人可以幫我弄清楚爲什麼這兩個undefined？

Answer 1

的是與你的代碼有兩個主要問題（和一個未成年人）：

首先，你的函數Multiplication和Divide有兩個參數num1和num2是陰影全球的，但你打電話沒有參數的函數，所以在函數內部，這些函數的值將爲undefined。乘以或劃分undefined本身給予NaN（不是數字）。

其次，即使你從你的功能，刪除參數num1和num2是兩個領域的值時，代碼運行，也就是頁面加載時。所以如果你改變輸入字段的值，按下按鈕不會給出不同的結果。

三，你的變量num1和num2是字符串，而不是數字，因爲輸入字段的.value給出了一個字符串。這不會影響你乘以或劃分字符串時的效果，但如果你加兩個字符串，然後'1' + '1' == '11'而不是2，所以你應該使用​​將你的字符串轉換爲數字。

考慮這些事情考慮進去，你最終的東西是這樣的：

function Multiplication() {  
 
    var num1 = Number(document.getElementById('num1').value); 
 
    var num2 = Number(document.getElementById('num2').value); 
 

 
    document.getElementById('result').innerHTML = num1*num2; 
 
} 
 
    
 
function Divide() { 
 
    var num1 = Number(document.getElementById('num1').value); 
 
    var num2 = Number(document.getElementById('num2').value); 
 

 
    document.getElementById('result').innerHTML = num1/num2; 
 
}

<form> 
 
    <input type="number" value="2" id="num1"/> 
 
    <input type="number" value="3" id="num2" /> 
 
    <input type="button" value="Multiplication" onClick="Multiplication()"/> 
 
    <input type="button" value="Divide" onClick="Divide()"/> 
 
</form> 
 

 
<div> 
 
    <span>The result is:</span> 
 
    <p id="result"></p> 
 
</div>

Answer 2

在你的onclick事件中沒有傳遞給這兩個函數的參數。

刪除參數並嘗試從您聲明的函數中獲取num1和num2。

Answer 3

您設置功能的方式，

function Multiplication (num1,num2){...} 

這個功能期待給予兩個值，當函數被調用，目前正在調用該函數沒有通過任何變量的按鈕。

onClick="Multiplication() 

，從而解決這個問題，你要麼必須刪除值時，該功能是這樣定義的，

function Multiplication(){...} 

，而不是尋求從調用它的按鈕中的變量，它會再在腳本內查找它們。 如果不工作，然後改變你的JavaScript來這樣的事情，

var num1 = document.getElementById('num1').value; 
var num2 = document.getElementById('num2').value; 


function Multiplication() { 
    var num1 = document.getElementById('num1').value; 
    var num2 = document.getElementById('num2').value; 
    document.getElementById('result').innerHTML = num1*num2; 

} 

function Divide() { 
    var num1 = document.getElementById('num1').value; 
    var num2 = document.getElementById('num2').value; 
    document.getElementById('result').innerHTML = num1/num2; 
} 

這應該工作，如果您有任何其他疑問，請不要猶豫，問！

Answer 4

全局和局部變量的概念是相同的，幾乎在所有的語言。

//global variables 
var num1=parseInt(document.getElementById('num1').value); 
var num2=parseInt(document.getElementById('num2').value); 

function Multiplication() { 
     document.getElementById('result').innerHTML = num1*num2; 
} 

function Divide() { 
    document.getElementById('result').innerHTML = num1/num2; 
} 

//local variables 
function Multiplication() { 
    var num1=parseInt(document.getElementById('num1').value); 
    var num2=parseInt(document.getElementById('num2').value); 
    document.getElementById('result').innerHTML= num1*num2; 
} 

function Divide() { 
    var num1=parseInt(document.getElementById('num1').value); 
    var num2=parseInt(document.getElementById('num2').value); 
    document.getElementById('result').innerHTML=num1/num2; 
}