CODEWITHSUNDEEP
javascripthtmlglobal-variableslocal-variables
Deepansh
Deepansh

Reputation: 73

javascript global variables - scope for functions?

I tried making a simple program using javascript which will calculate the sum and average of two numbers entered in the textfields.

<script>
var a=parseInt(document.getElementById("text1").value);
var b=parseInt(document.getElementById("text2").value);
function sum()
{
var result = document.getElementById("valueofsum");
var sum=a+b;
result.innerHTML = sum;
}

function average()
{
var result = document.getElementById("valueofavg");
var avg=(a+b)/2;
result.innerHTML = avg;

}

function reset()
{
 document.getElementById("text1").value = "";
 document.getElementById("text2").value = "";
 document.getElementById("valueofsum").innerHTML = "";
 document.getElementById("valueofavg").innerHTML = "";
}
</script>

The two variables which reads the values from textfields are globally declared and initialized as "a" and "b". The sum and average are returned as NaN(NotaNumber) instead of the calculated results.

If i use/declare both the variables inside the functions as local variables the code seems out to be working properly which makes me wonder about the scope of global variables in javascript?

Upvotes: 0

Views: 257

Answers (3)

Quentin
Quentin

Reputation: 943510

You are reading the values from the inputs when the page loads (at which point they are, presumably, empty strings).

If you want to get the values at the time the sum or average functions run (i.e. after the user has entered something into them), then you need to fetch their values when those functions run.

See the following code example:

function sum() {
  var a=parseInt(document.getElementById("text1").value);
  var b=parseInt(document.getElementById("text2").value);
  var result = document.getElementById("valueofsum");
  var sum=a+b;
  result.innerHTML = sum;
}

Upvotes: 2

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22885

You are getting values outside, in global scope and when those lines were executed, values were empty. You need to get the fields reference in global scope to avoid repetition but get values in side functions.

<script>
  var a = document.getElementById("text1");
  var b = document.getElementById("text2");
  function sum()
  {
  var result = document.getElementById("valueofsum");
  var sum = parseInt(a.value) + parseInt(b.value);
  result.innerHTML = sum;
  return sum;
  }

  function average()
  {
  var result = document.getElementById("valueofavg");
  var avg= sum()/2;
  result.innerHTML = avg;
  return avg;
  }

  function reset()
  {
   document.getElementById("text1").value = "";
   document.getElementById("text2").value = "";
   document.getElementById("valueofsum").innerHTML = "";
   document.getElementById("valueofavg").innerHTML = "";
  }
</script>

Upvotes: 1

Strahdvonzar
Strahdvonzar

Reputation: 400

You are not providing any HTML code , so i guess you have placed your script at the start of your page and the HTML code follows after it resulting in your code running prior to the DOM creation , thus no "text1" and "text2" elements actually exist at that point.

When you place them inside the Function , you simply avoid the above issue , cause i suspect you are executing these functions at the end of your Page , or with any onClick event somewhere.

If that is not the case , please provide a bit more insight of the structure of your page.

Upvotes: 1

Related Questions