javascript - getElementById 在循环中导致未捕获的类型错误

Question

拥有其他语言方面的经验，但对 HTML/JavaScript 相对较新。我希望以下代码能够工作:

var b;
var i;
for (i = 0; i < 2; i++) {
   b = document.getElementById(tools[i]).value;
   document.write(tools[i] + "<br>");
}

其中工具在上面定义为

var tools = [
    "barb",
    "arch",
];

和我尝试访问的元素是表单的一部分。但是，这给了我一个 Uncaught TypeError: Cannot read property 'value' of null

当代码为:时，b 设置为正确的值，没有错误:

var b;
b = document.getElementById(tools[0]).value;      // or tools[1]

但即使这个代码也会导致错误(即，当循环变量甚至没有使用时):

var b;
var i;
for (i = 0; i < 2; i++) {
   b = document.getElementById(tools[0]).value;    // or tools[1]
   document.write(tools[i] + "<br>");
}

非常感谢您提供的任何帮助。

Answer 1

听起来您的脚本正在您尝试访问的 DOM 元素准备就绪之前执行。确保将您的代码放入窗口 onload 事件中(如果您使用的是 jQuery，则将其放入 DOM 就绪事件中)。

这意味着您将无法使用 document.write() (无论如何您都不应该使用它)，因此您需要一个替代方案(如下所示):

window.onload = function() {
  var tools = [
    "barb",
    "arch"
  ];
  var b;
  var i;
  // specify the ID of the element where you want to insert values
  var target = document.getElementById("targetLocation");
  for (i = 0; i < tools.length; i++) {
    b = document.getElementById(tools[i]).value;
    target.appendChild(document.createTextNode(tools[i] + ' - ' + b));
    target.appendChild(document.createElement("br"));
  }
};

<div id='targetLocation'></div>
<input id='barb' type='text' value='wire' />
<input id='arch' type='text' value='nemesis' />

编辑:另一种可能性是您已将代码设置为在某些事件期间运行，在这种情况下，document.write() 可能会清除您的代码整个页面。如果发生这种情况，那么 document.getElementById() (具有任何 Id)确实会返回 null。