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元素准备好之前正在执行。确保将代码放在窗口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。

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

3 个答案: