Using array elements to assign “id=” values returns: TypeError: document.getElementById(...) is null
<p>I'm trying to write calculated values to table cells referencing them by their <code>id=</code> tag that are chosen using array elements. All attempts to get this working such as where <code>“ “</code> are coded, and first trying <code>spans[index]= spans[index].toString();</code> and using <code>window.setTimeout(function () { code.. }, 0);</code> gives the above error.</p>

<p>The many of the similar questions that I have found posted have responses suggesting that the error is related to page loading.</p>

<p>I am either misunderstanding the solutions given or what I'm attempting is different. It would be  appreciated if someone could give an example of how this is accomplished.   </p>

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

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



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