使用数组元素分配“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/

Answer 2

如果不想选择文字id为"'spans[index]'"的（不存在的）元素，请使用document.getElementById(spans[index])。

顺便说一句，你所有的开头标签都错误地以/>结尾，而它应该只是>。不知道你怎么没有从中得到一个大的HTML解析错误。/>语法仅允许用于自关闭元素，如hr、br、meta等，实际上仅在XHTML中是必需的。

此外，您对outputs[index] * 13) / 100的计算没有太大意义，因为您将字符串与数字13相乘，这将产生NaN。不确定你想用它实现什么。