Countdown function

Haddman

I've been working on a small countdown function but I don't seem to be able to get it to work:

 
function tick_timer() {
    var tick;
    tick = document.getElementById('tick').value;
    tick -= 1;
    document.getElementById('tick').innerHTML = tick;
}
setTimeout("tick_timer()",1000);

<div id="tick"><?=counter("2");?></div>

When the script runs it returns "NaN"

paulnaj

Try ...

tick = parseInt(document.getElementById('tick').value);

... or ...

tick = 0 + document.getElementById('tick').value;

Paul.

PS. You should use 'echo' rather than the deprecated shorthand ...

<div id="tick"><? echo counter("2");?></div>

Haddman

Neither works.

paulnaj

Well that's helpful!

Haddman

As in i still get the NaN error.

big_nerd

function tick_timer() {
    var tick;
    tick = document.getElementById('tick').innerHTML;
    tick -= 1;
    document.getElementById('tick').innerHTML = tick;
}

You are trying to get a VALUE of an HTML element, which you can't.

Since you are setting the innerHTML as the lower value, which you know works else you wouldn't see the NaN value, you want to GET the innerHTML value in order to process, since a DIV's VALUE will always come out undefined.

You can use VALUE if it's a form element.

You can also shorten it by doing the following:

function tick_timer() {
    var tick;
    tick = document.getElementById('tick');
    tick.innerHTML -= 1;
}

Haddman

According to what you're telling me, what i'm doing right now is not possible. I tried to use a hidden input but that didn't work either, it start at f.x. 30 and went to 29 then stopped, could it be that i can't change the value of the input or that i did it wrong?

function tick_timer2() {
	var tick;
	tick = document.getElementById('tick2').value;
	tick -= 1;
	document.getElementById('tick2').value = tick;
	document.getElementById('show_tick').innerHTML = tick;
}
setTimeout("tick_timer2()",1000);

<span id="show_tick"><?=counter("2");?></span>
<input type="hidden" value="<?=counter("2");?>" id="tick2">

Anyone have a solution?

paulnaj

This works ...

<html>
<head>
<script type="text/javascript">
function tick_timer() {
	var tick = parseInt(document.getElementById('tick').innerHTML);
	if(tick == 0){
		return;
	}
	tick -= 1;
	document.getElementById('tick').innerHTML = tick;
	setTimeout("tick_timer()", 1000);
}
window.onload = function(e){
	setTimeout("tick_timer()", 1000);
}
</script>
</head>
<body>
<div id="tick">10</div>
</body>
</html>

Haddman

So the only thing needed was to change .value into .innerHTML .
Thank you very much!

paulnaj

Well no,

Change .value into .innerHTML
Use parseInt() to ensure you are operating on an integer
Use window.onload() to start the process after the page has loaded.
Use correct syntax for echo-ing text

Weedpacket

I'd suggest

	setTimeout(tick_timer, 1000);

rather than

	setTimeout("tick_timer()", 1000);

The latter requires the string to be parsed and the result evaluated; the former specifies the function to be called directly.