-
A graphic odometer
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?
Code:
<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>
-
Re: A graphic odometer
First off...it's innerHTML not innerHtml.
Also...your <img> tag is invalid HTML.
Code:
<img src="" alt="" />
-
Re: A graphic odometer
I understand innerHTML instead of innerHtml, thanks.
If I uncomment the alert after creating image value it displays exactly whats needed.
-
Re: A graphic odometer
Not seeing your problem. Works for me!
Your count is off because you increment the variable before calling the GraphicOdo() function.
Try the following and see what I mean...
Code:
var image = '<img src="c' + d[i] + '.gif" alt="" />';
document.getElementById('GraphicCounter').innerHTML = image;
-
Re: A graphic odometer
Have a look at http://www.k9t.za.net/odometer/ for a better idea.
-
Re: A graphic odometer
And...what's not working?!?!?
-
Re: A graphic odometer
You said you have the images as png files, 0-9, but you are referring to them as c0.gif, c1.gif etc. It might just be that you have the filenames wrong in the code.
-
Re: A graphic odometer
My mistake. I will be using .png but during development am using what I have, namely .gif
