Question

I have the following code and I can’t understand what is wrong.

<tr id="outState">
    <th>State</th>
    <td style="text-align: center;" id="stateRow_0" xmlns="">
        <select id="state_0">
            <option value="0">0</option>
            <option value="1">1</option>
        </select>
    </td>
</tr>

Output:

alert(document.getElementById("outState"));
alert(document.getElementById("stateRow_0 "));
alert(document.getElementById("state_0"));

The first gives me null and the second succeeds.
On IE9 I get on the first success and on the second null.

The JS is called after all the DOM has been loaded.

Why and how can I solve this?

JSFiddle

Answer 1

The problem is that the second alert has an extra space at the end, causing the getElementById to fail..

alert(document.getElementById("stateRow_0 "));
                                         ^

if you remove it, it will work just fine..