javascript全局变量-函数范围？

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?

Answer 1

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

Answer 2

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.

Answer 3

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>