对javascript局部变量VS全局变量感到困惑

Question

这是下面的代码：

 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都是全局变量，有人可以帮我弄清楚为什么这两个未定义吗？

Answer 1

设置功能的方式，

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 2

在您的onclick事件中，没有参数传递给这两个函数。

删除参数并尝试从声明的函数中获取num1和num2。

Answer 3

您的代码有两个主要问题（一个是次要问题）：

首先，您的函数Multiplication和Divide有两个参数num1和num2 ，它们遮蔽了全局参数，但是您调用的函数没有参数，因此在函数内部，它们的值将为undefined 。 本身通过undefined的乘法或除法得到NaN（ 不是数字 ）。

其次，即使从函数中删除了参数， num1和num2也是代码运行时（即页面加载时）两个字段的值。 因此，如果您在输入字段中更改值，则按按钮不会产生不同的结果。

第三，变量num1和num2是字符串 ，而不是数字，因为输入字段的.value给出了字符串。 当您乘以或除以字符串时，这没有什么区别，但是如果要添加两个字符串，则使用'1' + '1' == '11'而不是2，因此应使用Number()将您的字符串转换为数字。

考虑到这些因素，您最终会得到如下结果：

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