Changing the value of an <h3> heading

[Fmdpa]

I'm trying to create a page that has multiple images, and when you roll over the images, a single box will display dynamic captions based on the image being hovered over. With unobstrusive javascript in mind, I tried doing something like this:

document.getElementById("img1").onmouseover = function() {caption()};function caption() {   document.getElementById("caption").innerHTML = "Caption for image1";}

It doesn't work. My logic for doing it this way was that if .innerHTML displays the value of the text enclosed in that tag, then couldn't you set the value of the tag via javascript use .innerHTML? What is the proper way to do this?

[HungryMind]

HI!Trydocument.getElementById("myh3").firstChild.data = "Caption for image1";<h3 id="myh3">My Caption</h3>

[dsonesuk]

depends where you placed the javascript code? In between the head tags, it will attempt to add the onmouseover function to a element that has not been rendered yet.if it is placed below image and header it should work fine. if within head tags trywindow.onload=function(){document.getElementById("img1").onmouseover = function() {caption()};}

[Fmdpa]

Yes, it had to do with the placing of the script. Moving it below the body worked (with .innerHTML = "x") and I assume window.onload would work too, though I never tried it.