Question

PROBLEM

This works if I take out the comment

    //document.getElementById('formtimer').innerHTML = TimeStr; // Shows 00:15:00

Works wonderfully. So, I comment that out and…

I wanted to make a graphical counter so I went into Photoshop and made 0-9 and tried this…

var imgCounter = document.getElementById('formtimer');
imgCounter.src = "graphics/odometers/white and blue with black background/1.png";

When the 1 was never drawn I put this in the HTML (just in case I had to have a picture already there)…

<td class="tbl_col1"><div align="right" id="formtimer"><img src="graphics/odometers/white and blue with black background/0.png" /></div></td>

SO… it draws a 0 on the screen, and the javascript should change it to a 1. I thought the path was incorrect so I played with that. I even copied the below code from another function (that works) to here – and it didnt work (the original ID for the “other” working code was different. I changed it to ‘formtimer’ when I copied it into this non-working script.

var img_sad = "graphics/signup/smiley-sad006.gif";
var imgUsername = document.getElementById('formtimer');
imgUsername.src = img_sad;

I’m confused why the innerHTML works fine, and my graphics don’t work. I tried debugging in Firebug and no errors appear.

Please and thank you once again!

Answer 1

document.getElementById('formtimer'); gets the <div> element and imgCounter.src = "..." sets the src attribute of the <div>, which has no meaning.

You should get the <img> element instead. You can do this using the firstChild property or adding an id to the <img> element.