JavaScript全局变量 - 功能范围

Question

我尝试使用JavaScript制作一个简单的程序，该程序将计算在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>

读取文本字段值的两个变量被全局声明并初始化为" A"one_answers" B"。总和和平均值作为NAN（NOTANUMBER）而不是计算结果。

如果我使用/声明函数中的两个变量，因为局部变量似乎可以正常工作，这使我想知道javascript中全局变量的范围？

Answer 1

您正在从输入加载时从输入中读取值（这可能是它们，大概是空字符串）。

如果要在sum或average函数运行时获得值（即在用户输入某些内容后），则当这些功能运行时，您需要获取其值。

请参阅以下代码示例：

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

您没有提供任何HTML代码，所以我想您已将脚本放置在页面的开始，HTML代码在导致DOM创建之前运行的代码后遵循，因此实际上没有" text1"one_answers" text2"元素。

当您将它们放置在功能中时，您只需避免上述问题，因为我怀疑您在页面末尾执行这些功能，或者在某个地方进行任何ONCLICK事件。

如果不是这种情况，请提供有关页面结构的更多见解。

Answer 3

您在外部，在全局范围内以及执行这些行时，值为空。您需要在全局范围中获取字段参考，以避免重复，但在附带功能中获得值。

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