www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Counter problem

  1. #1
    Join Date
    Nov 2009
    Posts
    65

    resolved [RESOLVED] Counter problem

    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?

  2. #2
    Join Date
    Dec 2009
    Location
    Colorado
    Posts
    104
    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;

  3. #3
    Join Date
    Nov 2009
    Posts
    65
    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");
    				}
    }
    Last edited by ajajajak; 02-10-2010 at 12:28 PM. Reason: Adding info

  4. #4
    Join Date
    Dec 2009
    Location
    Colorado
    Posts
    104
    You need to declare the variable timer as global. Declare it blank outside all functions.
    <script>
    var timer = "";
    function...

  5. #5
    Join Date
    Nov 2009
    Posts
    65
    Right that did the trick, thanks!

  6. #6
    Join Date
    Nov 2009
    Posts
    65
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles