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

Question

Here is the code below:

 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> 

I am getting result NAN when i click the multiplication or divide button to trigger the function,but i thought num1 and num2 both are global variable,could someone help me figure out why the both undefined?

Answer 1

The way you set up your functions,

function Multiplication (num1,num2){...}

this functions is expecting two values to be given when the function is called, currently the button that calls the function doesn't pass any variables.

onClick="Multiplication()

To remedy this you would either have to remove the values when the function is defined like this,

function Multiplication (){...}

Thus instead of looking for the variables from the button that called it, it would then look for them inside the script. If that doesn't work then change your javascript to something like this,

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

This should work, if you have any other questions don't hesitate to ask!

Answer 2

In your onclick event there is no arguments passed to these two functions.

Remove arguments and try getting num1 and num2 from within the functions you declared.

Answer 3

The are two major problems (and one minor) with your code:

First of all, your functions Multiplication and Divide have two arguments num1 and num2 that shadow the global ones, but you're calling the functions with no arguments, so inside the functions, these will have the value undefined . Multiplying or dividing undefined by itself gives NaN ( not a number ).

Secondly, even if you remove the arguments from your functions, num1 and num2 are the values of the two fields when the code is running , that is, when the page is loading. So if you change the value in the input fields, pressing the buttons would not give a different result.

Third, your variables num1 and num2 are strings , not numbers, since .value of an input field gives a string. This won't make a difference when you're multiplying or dividing strings, but if you're adding two strings, then '1' + '1' == '11' instead of 2, so you should use Number() to convert your strings into numbers.

Taking these things into account, you'd end up with something like this:

 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 and local variables concept is same almost in all languages.

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