javascript - 使用数组元素分配 “id=” 值返回 : TypeError: document. getElementById(...) 为 null

Question

我正在尝试将计算值写入通过使用数组元素选择的 id= 标记引用它们的表格单元格。所有尝试使其正常工作，例如在 ““ 编码的地方，首先尝试 spans[index]= spans[index].toString(); 并使用 window.setTimeout(function () { code.. }, 0); 给出上述错误。

我发现发布的许多类似问题的回复都表明该错误与页面加载有关。

我要么误解了给出的解决方案，要么我正在尝试的是不同的。如果有人能举例说明如何实现这一点，我们将不胜感激。

function outputResults() {
    var spans = ['span1', 'span2', 'span3'];
    var outputs = ['output1', 'output2', 'output3'];

    for (var index = 0; index < spans.length; index++)
    { 
        outputs[index] = (outputs[index] * 13) / 100;
        (document.getElementById('\'spans[index]\'').innerHtml = outputs[index]);
    };
};

<table BORDER="1" width="300" />
    <tr />
        <td /> <span id="span1">&nbsp;</span> </td>
        <td /> <span id="span2">&nbsp;</span> </td>
        <td /> <span id="span3">&nbsp;</span> </td>
    </tr>
</table>
<br />
<input type="button" value="Click to fill cells" onclick="outputResults();" />

Answer 1

首先，让我们看一下这一行:

outputs[index] = (outputs[index] * 13) / 100;

您预计这里会发生什么？假设索引等于 0。outputs[0] == 'output1'。您的作业正在执行此操作(元):

outputs[0] = ('output1' * 13) / 100;

您应该修改此声明。至于您的错误，这应该对您有用:

document.getElementById(spans[index]).innerHtml = outputs[index];

编辑:你的代码有很多问题。您需要修复 HTML(自闭合 td 和 tr 标签)和 JavaScript 代码(输出值和innerHTML)。请参阅此处的工作示例:http://jsfiddle.net/pkRmC/2/