getElementById 在循环中导致 Uncaught TypeError

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

您的数组中有一个尾随逗号，它在末尾添加了一个空索引。现代浏览器没有问题，旧浏览器有。

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

现在document.write页面损坏后，它会删除页面内容。您应该创建新元素或设置 innerHTML

var b, i, out="";

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

document.getElementById("myOutputElementId").innerHTML = out;

Answer 2

听起来您的脚本在您尝试访问的 DOM 元素准备就绪之前正在执行。确保将您的代码放入 window 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）确实会 return null.

Answer 3

这意味着它找不到名为 "tools" 的元素，因为它正在寻找具有该 ID 的标签。也许这样的东西对你有用：

<!DOCTYPE html>
<html>
 <body>

  <p id="demo"></p>

  <script>
   tools = ["barb", "arch"];
   text = "";
   var i;
   for (i = 0; i < tools.length; i++) {
    text += tools[i] + "<br>";
   }

   document.getElementById("demo").innerHTML = text;
  </script>

 </body>
</html>

getElementById 在循环中导致 Uncaught TypeError

getElementById causing Uncaught TypeError in loop

html

javascript

loops

getelementbyid