Question

我试图遍历六个数字的数组并修改相应的表单元素，如此...

for(var x in numbers) { document.getElementById('r' + numbers[x]).value++; }

但是，这不会更新文本字段，调试器会显示Type Error: document.GetElementById(...) is null。但是，以下代码按预期工作

var t = 25;
document.getElementById('r' + t).value++;

任何人都可以对此有所了解吗？我不是一个真正的javascript程序员，而是从代码示例中拼凑出一些东西，我不知道为什么第二种情况有效而不是第一种情况。

PS。是的，我已尝试使用更正确的for (var i=0; i < numbers.length; i++) {}格式;）

Answer 1

如果jsbin中的这个设置类似于你所拥有的并且它不起作用......我怀疑你的代码没有找到DOM中的元素，你需要在DOM实际加载时运行代码。

http://jsbin.com/fasibuse/1/edit?html,js,output

我认为一个更通用的解决方案可以做同样的事情（将元素增加1）......将是

var formElements = document.forms[0].getElementsByTagName( 'input' );

for (var el of formElements) {
  el.value++;
}

Answer 2

直接阅读代码：

var numbers = [10,20,30,40];
for(var x in numbers) {
    console.log(x); // <-- output 0,1,2,3 (the indexes, not the content)
}

你应该使用

numbers.forEach(function (x) {
    document.getElementById('r' + numbers[x]).value++;
});

Answer 3

这样的事情应该有效：

<!DOCTYPE html>
<html>

<body>
    <input id="sparky1" value="1"><br>
    <input id="sparky2" value="3"><br>
    <input id="sparky3" value="5"><br>
    <input id="sparky4" value="7"><br>
    <input id="sparky5" value="9"><br>


    <script>
        for (var i=1; i < 6; i++) {
            document.getElementById('sparky' + i).value = parseInt(document.getElementById('sparky' + i).value) + 1;
        }
    </script>
</body>

Answer 4

数组元素存在无效访问，这里是正确的。试试这个。

for(var x in numbers) { document.getElementById('r' + x).value++; }

这样可以正常工作。

使用getElementbyID时，遍历数组会返回null

4 个答案: