javascript 全局变量 - 函数范围？

Question

我尝试使用 javascript 编写一个简单的程序，它将计算在文本字段中输入的两个数字的总和和平均值。

<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"和"b"。总和和平均值作为 NaN(NotaNumber) 而不是计算结果返回。

如果我 use/declare 函数内的变量都作为局部变量，代码似乎可以正常工作，这让我想知道 javascript?[=12= 中全局变量的范围]

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

javascript 全局变量 - 函数范围？

javascript global variables - scope for functions?

html

javascript

global-variables

local-variables