混淆了javascript局部变量和全局变量

Question

下面是代码：

null

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>  

null

当我点击乘法或除法按钮触发函数时，我得到的结果是NAN，但我认为num1和num2都是全局变量，有人能帮我弄清楚为什么这两个都没有定义吗？

Answer 1

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

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

Answer 2

您设置功能的方式,

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 3

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

首先，函数multiplication和divide有两个参数num1和num2来遮蔽全局参数，但是您调用的函数没有参数，因此在函数内部，这些函数将具有值undefined。将undefined与其相乘或相除，得到的是NaN（不是数字）。

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

第三，变量num1和num2是字符串，而不是数字，因为输入字段的.value给出的是字符串。当您乘除字符串时，这不会有什么不同，但如果您要添加两个字符串，则“1”+“1”=="11“而不是2，因此您应该使用number()将字符串转换为数字。

考虑到这些因素,您将得到如下结果：

null

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>