困惑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; 
}