confused about javascript local variable VS global variable

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?

You aren't calling the function with any arguments, so it ends up being undefined * undefined in Multiplication, which is NaN. Attach a click handler to the button, and pass in the values. — Carcigenicate
– Carcigenicate, Commented Sep 28, 2016 at 1:29
its still not working even if i passed num1,num2 to the multiplication() as two arguments — chen.w
– chen.w, Commented Sep 28, 2016 at 1:34
Function parameters introduce local variables. Given that you didn't pass any values to the calls, they're set to undefined. — Bergi
– Bergi, Commented Sep 28, 2016 at 1:34
@allen.w Did you pass in the variables in a click handler, or as you have in the original code? Don't embed calls to Javascript functions in HTML; it's very bad practice practice. I other words, don't use the onclick property of the HTML tag. Attach a click handler to the button element. — Carcigenicate
– Carcigenicate, Commented Sep 28, 2016 at 1:37

Tishbyte · Accepted Answer · 2016-09-28 01:34:31Z

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!

answered Sep 28, 2016 at 1:34

Tishbyte

409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tishbyte Over a year ago

Alrighty, if you need anything else, don't hesitate to ask!

Freyja · Accepted Answer · 2016-09-28 01:39:57Z

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>

Perfect explanation!Thanks so much,now i completed understand where am i doing wrong.

Marcin · Accepted Answer · 2016-09-28 01:29:58Z

0

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.

answered Sep 28, 2016 at 1:29

Marcin

1,4921 gold badge14 silver badges27 bronze badges

2 Comments

chen.w Over a year ago

its still not working even if i passed num1,num2 to the multiplication() as two arguments.

chen.w Over a year ago

The thing is if i move "var num1 = document.getElementById('num1').value; var num2 = document.getElementById('num2').value;" inside of multiplication function then it is working as expected,that is what i am getting confused about.

Developer · Accepted Answer · 2016-09-28 01:42:03Z

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

Collectives™ on Stack Overflow

confused about javascript local variable VS global variable

4 Answers 4

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related