javascript - getElementById在循环中导致未捕获的TypeError

具有其他语言的经验，但是相对于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>");
}

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

最佳答案

听起来您的脚本正在执行，而您要访问的DOM元素已经准备就绪。确保将代码放入窗口onload事件（如果使用jQuery，则将其放置在DOM ready事件中）。

这将意味着您将无法使用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。

关于javascript - getElementById在循环中导致未捕获的TypeError，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27792725/