变量分配给 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，一切都会正常。这应该很容易，但它就是行不通。我检查了拼写，一切看起来都不错 - 是我遗漏了什么吗？

Answer 1

只要您在问题中显示的脚本出现在页面源中的元素之后，此操作就会起作用。否则浏览器尚未解析这些元素，因此无法通过 ID 找到它们。

让它工作的另一种方法是在 onload 或 document-ready 处理程序中进行分配，因为到 onload 或 document-ready 发生时所有 元素无论位于页面源代码中的哪个位置都可以访问。

Answer 2

您的代码工作得很好，因为您已将其包含在问题中。您可以在这里看到：http://jsfiddle.net/jfriend00/kXrDF/。

这意味着您的问题中还存在其他错误。也许您可以包含更多代码，以便我们可以帮助您找到可能导致该问题的其他原因。

要测试“全局”变量的范围，您可以在 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 等框架都具有内置函数，可帮助您在页面加载后运行代码。