getElementById的变量赋值不起作用

Question

我曾在stackoverflow上寻找答案，但没有找到与我相同的问题。我相信这个问题很容易解决，但不知何故……它没有起作用。

我有一些输入，在计算器格式中进行加/乘/减/除等运算。 我想要的是，在函数块外声明变量，以消除对getElementById的不必要引用（我不想使用任何复杂的多个getElementById赋值）。

我的Javascript代码如下：

//Declarations: designed to minimze calls to document.getElementByID
    var number1 = document.getElementById("num1");
    var number2 = document.getElementById("num2");
    var numAnswer = document.getElementById("answer");

    //Add together two numbers
    function add()
    {
        numAnswer.value = parseFloat(number1.value) + parseFloat(number2.value);
    }

这让我感到很疯狂-如果我去掉变量，只使用普通的document.getElementById，一切都可以工作。这应该很容易，但它却不起作用。我已经检查了拼写，一切似乎都没问题-我是否漏掉了什么？

- Singular1ty

---

很确定这都与作用域有关。 - Daniel O'Hara

我需要将变量设置为全局变量，因为我有其他函数需要使用它们...我在家里的小JavaScript书中确信这应该可以工作。而MDN也说应该可以。:( - Singular1ty

Answer 1

只要您在问题中展示的脚本出现在页面源代码中的元素之后，这将有效。否则，浏览器尚未解析这些元素，因此无法通过ID找到它们。另一个使其工作的方法是在“onload”或文档准备好处理程序中执行分配，因为在“onload”或文档准备好发生时，所有元素都可以访问，无论它们在页面源代码中的位置在哪里。

- nnnnnn

---

等一下...之后呢？这个脚本在头部 - 我以为这不重要？ - Singular1ty

你需要在DOM加载完成后才进行DOM操作，即window.onload = function() { ... stuff ... };。 - kinakuta

@kinakuta，如果我使用window.onload，那不是需要一个函数吗？如果我在函数内声明变量，那它们就只是局部的，对吧？有没有一种方法可以强制让整个javascript <script>在窗口加载时运行？ - Singular1ty

最简单的方法是将所有脚本块移动到文档末尾，在关闭的</body>标签之前。 - Phil

@user-Unknown：正如Phil所说，最简单的选择是将现有脚本移到页面底部。如果您想改用 onload，您仍然需要在 onload 处理程序外声明变量作为全局变量，但是您需要在 onload 处理函数内使用 document.getElementById（） 设置变量。然后，假设您知道在 onload 前不会调用它们，那么您的 add（） 和其他函数将正常工作... - nnnnnn

Answer 2

你的代码在你的问题中已经包含，所以它可以正常工作。你可以在这里看到: http://jsfiddle.net/kXrDF/jfriend00/。

这意味着还有其他问题没有包含在你的问题中。也许你可以包括更多的代码，这样我们就可以帮助你找出其他可能导致问题的原因。

为了测试你的“全局”变量的范围，你可以在add()函数中设置断点，并检查number1、number2和numAnswer的值。如果你还没有弄明白如何设置断点和检查变量，我强烈建议你这样做。如果你仍然不行，那么你可以像下面这样在add()代码中放置临时测试，以缩小问题的范围：

if (!number1) alert("number1 is not valid");
if (!number2) alert("number2 is not valid");
if (!numAnswer) alert("numAnswer is not valid");

另一种可能性是您的代码在页面加载之前运行得太早，因此初始代码无法找到DOM元素，因为它们尚不存在。为了防止这成为问题，您需要确保您的代码在页面加载后才运行。您可以通过将代码放置在页面元素之后或使用各种技术来检测页面何时已加载并在那时不运行初始化全局变量的代码来实现这一点。像jQuery和YUI这样的框架都具有内置函数，可帮助您在页面加载后运行代码。

- jfriend00

---

感谢帮助 - 我通过将 <script> 下移了页面来解决了这个问题...我确实尝试了那些 !number1 警告，一切都很好。我会检查断点以备将来使用！ :D - Singular1ty

@user-Unknown - 提醒一下，看起来你在这里还比较新，如果你能给自己取一个有意义的用户名，那么如果我们将来再次相遇，我们就有机会互相认出来了。 - jfriend00