Image Counter

[Ries]

<script type="text/javascript">
function counter() {
	var first;
	var number;
	
	if (first == ""){
		var first = 42;
		var number = 0;
	}else{
		var number = number++;
	}
	
	var full = 7;
	var length = strlen(number);
	var full = full - length;
	
	 for (i=0;i<full;i++){
		document.getElementById('counter').innerHTML = document.write('<img src="images/0.gif" border="0">');
	 }
	 
	 for  (i=0;i<length;i++){
		document.getElementById('counter').innerHTML = document.getElementById('counter').innerHTML + document.write('<img src="images/'.number.substring(i,1).'.gif" border="0">);
	 }
	
}
var stop = setInterval("counter()",1000);
</script>
<span class="counter"></span>

What the code should do is show an image counter that increases by one every second and always shows 7 digits. Yet when the page loads nothing is shown, any ideas why?

[itsjareds]

The problem is line 22. You have a string that doesn't terminate (a quote isn't closed). Looks like you're used to another language like PHP that connects strings and variables like "string text".variable."string" . Javascript uses the plus sign (+) instead of the period to join strings and variables.

I made a few changes to that line that make it a bit more efficient. Instead of writing

document.getElementById('counter').innerHTML = document.getElementById('counter').innerHTML + (text here);

You could write

document.getElementById('counter').innerHTML += (text here);

I found another error on that line - you wanted to do this:

document.getElementById('counter').innerHTML += document.write('<img src="images/' + number.substring(i,1) + '.gif" border="0">');

This would make your <span> tag look like this:

<span id="counter">document.write(<img src="images/' + number.substring(i,1) + '.gif" border="0">)</span>

Which would simply display as plain text. You want to take out the document.write() function and just make the innerHTML equal to <img src="images/' + number.substring(i,1) + '.gif" border="0"> So, overall, change line 22 to this:

document.getElementById('counter').innerHTML += '<img src="images/' + number.substring(i,1) + '.gif" border="0">';

Another error was the line that looks like this:

var length = strlen(number);

strlen() is a php function, but is not a JavaScript function. Instead, use the .length property.

var length = number.toString().length;

I had to convert it to a string because the .length property only works on strings. This does not affect your number variable.

Could you post the link to your page? It would be helpful to see it in action.

[Ries]

I've got it hosted locally so I can't link to it.

Thanks for the help its working better now, but I've still got some problems. It only displays only 0 image and doesn't change no matter how long you leave the page open but the webpage is constantly doing something in the background.

Also the first for loop should calculate the number of 0's to display so it always takes the format of being 7 digits, yet that doesn't work either.

I've tried altering the loops and messing with the code but it either makes no difference or still only displays one.

[itsjareds]

There were quite a few things wrong with you script, but I think I fixed them all. It's hard to tell when I don't have the images, but maybe you could try it out.

First, you don't have to declare a declared variable more than once. So when assigning a variable a value, you don't have to include the "var" keyword when it's already declared.

So, this:

var first;
	var number;
	
	if (first == ""){
		var first = 42;
		var number = 0;
	}

Can be changed to this:

var first;
	var number;
	
	if (first == ""){
		first = 42;
		number = 0;
	}

Also, the line number = number++; can be changed to number++; .

The reason there seemed to be continuous loading on the page was because you used document.write. I'm not exactly sure why this happens, but the page will be in continuous load when you use that function. Just take it out and the script won't do that.

Change both your loops to this:

for (i=0;i<full;i++){
		document.getElementById('counter').innerHTML += '<img src="images/0.gif" border="0">';
	 }
	 
	 for  (i=0;i<length;i++){
		document.getElementById('counter').innerHTML += '<img src="images/' + number.toString().substring(i,1) + '.gif" border="0">';
	 }

Another problem was that your <span> tag had no id labeled "counter", but you named the class attribute that. I changed your span element to this: <span id="counter"></span> One thing that I wasn't sure of was these lines:

var first;
	var number;
	
	if (first == ""){

If you're checking to see if first has not been set, you should use the line if (first == null){ instead.

Also, every time that counter() runs, it will reset first because you are redeclaring it every time. Instead, put the variable declarations outside of your counter() function like this:

var first;
var number;
function counter() {	
	if (first == undefined) {

You also don't have to include the if statements at all. When declaring a variable, you can also assign it a value.

The code should be working now, try it out :D
This is my finished code that ran fine:

<script type="text/javascript">
var first = 42;
var number = 0;
var full_default = 7;
function counter() {
	number++;

	var length = number.toString().length;
	full = full_default - length;
	
	 for (i=0;i<full;i++){
		document.getElementById('counter').innerHTML += '<img src="images/0.gif" border="0">';
	 }
	 
	 for  (i=0;i<length;i++){
		document.getElementById('counter').innerHTML += '<img src="images/' + number.toString().substring(i,1) + '.gif" border="0">';
	 }
	
}
var stop = setInterval("counter()",1000);
</script>
<span id="counter"></span>

I made a new variable full_default because you don't have to keep declaring the static value of full to 7 before you begin modifying it.

[Ries]

Ok, it all works fine now expcept that it prints a new row of images each time. e.g

000000100000020000003

I have tried setting counters innerHTML to nothing at the beginning of the function which did not work and I also tried removing the + from the +=. The latter meant the the 0's didn't show while the numbers did and on both of them it broke when it got above ten displaying the first digit (the one) but not the next one, the code saying it was trying to access images/.gif

Thanks for your help btw, it's helping me get to grips with javascript.

[itsjareds]

No problem :P

I just worked on the script, now it will work completely. It also shows regular text digits if the image you link to does not exist.

<!-- This has to be placed at the top to make these elements available to the script -->
<span id="counter"></span><br/><br/>
<input id="stopBtn" type="submit" onClick="stopCounter()" value="Stop the counter"/>

<script type="text/javascript">
var first = 42;
var number = 0;
var full_default = 7;
var numString = "";

function counter(start) {
	var count = document.getElementById('counter');
	if (!start)
		number++;
	var numString = number.toString();

	var length = numString.length;
	full = full_default - length;

	count.innerHTML = '';

	for (var i=0;i<full;i++){
		count.innerHTML += '<img src="images/0.gif" border="0" alt="0"/>';
	}

	for  (var i=length;i>0;i--){
		var curNum = numString.substring(length-i, (length-i)+1);
		count.innerHTML += '<img src="images/' + curNum + '.gif" border="0" alt="' + curNum + '"/>';
	}
	if (start)
		return setInterval("counter()",1000);
}

var stop = counter(true);

function stopCounter() {
	var stopBtn = document.getElementById("stopBtn");
	window.clearInterval(stop);
	stopBtn.value = "Counter stopped";
	stopBtn.disabled = true;
	return false;
}
</script>

Just ask if you need anything explained :D

[Ries]

Wow, that works great thanks for your help. I think I get it now :)