对javascript的局部变量和全局变量感到困惑

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

您的代码有两个主要问题(一个次要问题):

首先，你的函数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 3

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

删除参数并尝试从您声明的函数中获取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;
}