Member Avatar for stockton

I have the following code which works fine until I try and display graphics.
Please tell me how I could/should display the odometer in graphics format rather than text.
I have all the necessary images as .png(0 through 9) in the same folder as the following code. It is just that the text counter displays but not the graphics?

<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function GraphicOdo(Nommer)
    {
    d = Nommer.toString();
    for (i=0; i<d.length; i++)
        {
        var image="<IMG SRC=c"+d[i]+".gif>";
//        alert(image);
        document.getElementById('GraphicCounter').innerHtml=image; 
        }
    }

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
GraphicOdo(c);
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onclick="doTimer()">
<input type="text" id="txt" /><br /><br />
<div id="GraphicCounter">
<img src="c0.gif" alt="zero"/>
</div>
</form>
</body>
</html>
  • 2 Contributors
  • 5 Replies
  • 381 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by Taywin
Member Avatar for Taywin

If you are using JavaScript to display images, it must be either all images are loaded or you call the server to render the HTML portion with image.

Please remember that JavaScript is client side and will read only the current loaded data of the page. The page cannot display different images by only changing/updating image tag source or rewrite innterHTML.

What you may do is to load all images but hide them somewhere in the page (using CSS). Then, you update the CSS for each image you want to display/hide according to the value you read.

Member Avatar for stockton

I cannot agree with what you say as if you look at http://www.k9t.za.net/odometer/ you will see that images are being loaded and displayed.
The problem now is that 10 is showing image 0 rather than image 1 followed by image 0.
It would also follow that 123 would display image 3 rather than image 1 image 2 image 3.

Member Avatar for Taywin

Interesting. Didn't know that FF now allows that to happen. Thanks for showing me.

Anyway, back to your code at line 20 to 22, you print the time out to text box and then change your display, so the image is always 1 number ahead of the output on the text box.

In your code line 14, notice that you keep rewriting innerHTML in the loop. As a result, the last number (image) is written to the innerHTML.

Edit: If you actually look, the image display is flickering because you keep rewriting innerHTML which causes the DOM to change. A way to fix this is to load all images on the page first, and use CSS & JavaScript to update the display.

Edited by Taywin because: n/a
Member Avatar for Taywin

You still forgot your original line 20 to 22... Swap the line 21 and 22...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.