Display a counter variable with JS

I have a rotating slide show I'm working on that uses Javascript. I use a counter in the function, and I want to display the value of the counter each time the image changes. (so it will say "viewing i of x pictures")

I tried using

<script language="javascript" type="text/javascript">document.write(i);</script>

but it only displays the value of i when the page loads, and it won't update each time i increases开发者_如何转开发. Is there something better than document.write(i) that will update each time i increases or decreases?

In your HTML, instead of the above SCRIPT tag have something like this:

<div id="counter"></div>

In your Javascript function where the counter value updates, have the following line:

document.getElementById('counter').innerHTML = i;

wrap the value in a div or span or something similar and include an id attribute. When the image changes, increment i and update the document.getElementById('dividhere').innerHTML with i