Question

以下是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

当我点击乘法或除法按钮来触发函数时，我得到结果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 shadow 全局参数，但是你'重新调用没有参数的函数，因此在函数内部，它们将具有值undefined。将undefined乘以或除以它会得到NaN（不是数字）。

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

第三，您的变量num1和num2是字符串，而不是数字，因为输入字段的.value给出了字符串。当您将字符串相乘或分割时，这不会产生影响，但如果您添加两个字符串，那么'1' + '1' == '11'而不是2，那么您应该使用{{1}将字符串转换为数字。

考虑到这些因素，你最终会得到这样的结果：

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

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

混淆javascript局部变量VS全局变量

4 个答案: