Question

I have run into a problem with getElementById again.. I never quite understood the behaviour of this method, as simple as it should be, it often doesn’t work for me.

What I have now is a HTML page that contains:

<div id="vraag">
    ha
</div>

<div id="antwoorden">

</div>
<div id="controls">
    <form name="controlform">
        <input type="button" name="back" disabled value="<" onClick="goBack();" />
        <input type="button" name="forth" value=">" onClick="goForth();" />
    </form>
</div>

I have attached a javascript file that does several (working) things, among which is this:

document.getElementById['vraag'].innerHTML = 'ho';

However, when I click the button that calls this, the firefox error console says:
Error: document.getElementById.vraag is undefined

Sadly, the only think I can think of is.. It simply is! I have used this method in very similar environments and that still works, so I can’t for the life of me figure out why this doesn’t work..

Answer 1

Use ( ) instead of [ ]

document.getElementById("vraag").innerHTML = 'ho';

See example:

http://jsfiddle.net/Curt/QKeHP/