javascript global variables - scope for functions?

Question

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?

did you console.log(a); console.log(b); and guess why they are NaN? — Fr0zenFyr
– Fr0zenFyr, Commented Jun 23, 2016 at 13:11
Provide a button or some other input so that the values are not read on the page load. Or do a setInterval(), that fetches the values and prints them continually. — William Brochmann
– William Brochmann, Commented Jun 23, 2016 at 13:14

C.Champagne · Accepted Answer · 2016-06-23 15:26:15Z

2

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

edited Jun 23, 2016 at 15:26

C.Champagne

5,5492 gold badges25 silver badges39 bronze badges

answered Jun 23, 2016 at 13:10

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

Strahdvonzar · Accepted Answer · 2016-06-23 13:14:50Z

1

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.

answered Jun 23, 2016 at 13:14

Strahdvonzar

4102 silver badges10 bronze badges

Comments

Zohaib Ijaz · Accepted Answer · 2016-06-23 13:16:35Z

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>

Collectives™ on Stack Overflow

javascript global variables - scope for functions?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related