[RESOLVED] Counter problem

**ajajajak** · 02-10-2010 10:56 AM

Hey,

Code:

function start(){
	document.getElementById("timer").value++;
	timer = window.setTimeout("start()", 30);
}

function stop(){
	window.clearTimeout(timer);
	var resultaat = document.getElementById("timer").value;
	if(resultaat == 100){
		alert("Proficiat! Perfecte timing!");
		}
		else if((resultaat == 99) || (resultaat == 101)){
			alert("Bijna perfect, maar nog niet helemaal");
			}
			else{
				alert("Nog een beetje oefenen, je timing kan beter");
				}
}

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Timing</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="timing.css" />
<script type="text/javascript">
/* <![CDATA[ */
function start(){
	document.getElementById("timer").value++;
	timer = window.setTimeout("start()", 30);
}

function stop(){
	window.clearTimeout(timer);
	var resultaat = document.getElementById("timer").value;
	if(resultaat == 100){
		alert("Proficiat! Perfecte timing!");
		}
		else if((resultaat == 99) || (resultaat == 101)){
			alert("Bijna perfect, maar nog niet helemaal");
			}
			else{
				alert("Nog een beetje oefenen, je timing kan beter");
				}
}
/* ]]> */
</script>
</head>
<body>
<div id="wrapper">
<form action="">
<fieldset>
	<legend>Timing</legend>
	<p>Probeer de timer te stoppen op <span>100</span></p>
	<input type="text" id="timer" value="0" onselect="blur()" />
	<div id="buttons">
		<input type="button" class="row" value="starten" onclick="start()" />
		<input type="button" class="row" value="stoppen" onclick="stop()" />
		<input type="reset" class="row" value="opnieuw" />
	</div>
</fieldset>
</form>
</div>
</body>
</html>

This gives an error in IE8, stating that on line 39 the object doesn't support this action.

HTML Code:

<input type="button" class="row" value="starten" onclick="start()" />

I don't see what is wrong with this, maybe you do?

**harrierdh** · 02-10-2010 11:29 AM

You need to fix this. You'll have to convert this to a number before you can increment it. HTML only returns strings.

document.getElementById("timer").value++;

Should be;

var temp = document.getElementById("timer").value;
temp = parseFloat(temp);
document.getElementById("timer").value = temp;

**ajajajak** · 02-10-2010 12:21 PM

Aah ok, I didn't know. Thanks!

I might have cheered too soon. After adapting the code it still gives the same error.

Code:

function start(){
	temp = document.getElementById("timer").value;
	temp = parseFloat(temp);
        temp++;
	document.getElementById("timer").value = temp;
	timer = window.setTimeout("start()", 30);
}

function stop(){
	window.clearTimeout(timer);
	var resultaat = document.getElementById("timer").value;
	if(resultaat == 100){
		alert("Proficiat! Perfecte timing!");
		}
		else if((resultaat == 99) || (resultaat == 101)){
			alert("Bijna perfect, maar nog niet helemaal");
			}
			else{
				alert("Nog een beetje oefenen, je timing kan beter");
				}
}

**harrierdh** · 02-10-2010 01:07 PM

You need to declare the variable timer as global. Declare it blank outside all functions.
<script>
var timer = "";
function...

**ajajajak** · 02-10-2010 01:40 PM

Right that did the trick, thanks!

**ajajajak** · 02-10-2010 04:08 PM

Again, seems like I cheered too soon.

Code:

var timer = "";
function start(){
	temp = document.getElementById("timer").value;
	temp = parseFloat(temp); // Waarde uit een html element uitlezen levert telkens een stringvalue op, om te incrementeren heb je de omzetting naar een getalformaat nodig
	temp++;
	document.getElementById("timer").value = temp;
	timer = window.setTimeout("start()", 30); // timer = window.setTimeout
}

function stop(){
	window.clearTimeout(timer);
	var resultaat = document.getElementById("timer").value;
	if(resultaat == 100){
		alert("Proficiat! Perfecte timing!");
		}
		else if((resultaat == 99) || (resultaat == 101)){
			alert("Bijna perfect, maar nog niet helemaal");
			}
			else{
				alert("Nog een beetje oefenen, je timing kan beter");
				}
}

This works in FF3.6 but not in IE8. Still same error: Object doesn't support this action.

Maybe you have some more idea's?

Thread: [RESOLVED] Counter problem

Thread Tools

Display

[RESOLVED] Counter problem

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions