Question

I’m trying to write calculated values to table cells referencing them by their id= tag that are chosen using array elements. All attempts to get this working such as where “ “ are coded, and first trying spans[index]= spans[index].toString(); and using window.setTimeout(function () { code.. }, 0); gives the above error.

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

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.

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

First, let’s look at this line:

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

What do you expect to happend here? Say index equals 0. outputs[0] == ‘output1’. Your assignment is doing this (meta):

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

You should revise this statement. As to your error, this should work for you:

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

EDIT:
There are a lot of problems with your code. You need to fix your HTML (self-closed td and tr tags) and your JavaScript code (outputs values and innerHTML). Please see working example here: http://jsfiddle.net/pkRmC/2/