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

这应该有效，如果您有任何其他问题，请随时询问!