Jump to content
Matpatnik

Adding countdown

Recommended Posts

Hi guys, this is what I got so fare as code and it work good.I would like to do a countdown that after a preset time it show the answer of the calculation and call myCalculOperation() function again and again without refreshing the whole page (only the division).Thank you to guide me

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="fr">  <head>	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">	<link rel="shortcut icon" href="favicon.ico">	<link rel="stylesheet" href="Matpatnik.css" type="text/css">	<title>Matpatnik Addition</title>	<script type="text/javascript">/* --Merci a http://www.scriptygoddess.com-- */	function showMoreAnything(blocknum, isOpen) {		hid = ('hide' + (blocknum));		unhid = ('click' + (blocknum));		if(document.getElementById) {			if(document.getElementById(hid).style.display) {				if(isOpen != 0) {document.getElementById(hid).style.display = "block";					document.getElementById(unhid).style.display = "none";				}else{					document.getElementById(hid).style.display = "none";					document.getElementById(unhid).style.display = "block";				}			}else{				location.href = isOpen;return true;			}		}else{			location.href = isOpen;return true;		}	} 	function myCalculOperation(maxNumber, minNumber, operation) {		num2 = Math.round(Math.random() * maxNumber);		do {			num1 = Math.round(Math.random() * maxNumber);		}while (num1 < minNumber) 		switch (operation) {			case 1: 				return num1 +" + "+ num2 +"</td><td id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 + num2);			break;			case 2: 				return num1 +" - "+ num2 +"</td><td id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 - num2);			break;			case 3: 				return num1 +" x "+ num2 +"</td><td id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 * num2);			break;			case 4: 				return (num1 * num2) +" ÷ "+ num1 +"</td><td id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ num2;			break;			default: 				return num1 +" + "+ num2 +"</td><td id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 + num2);			break;		}	}	</script>  </head>  <body>	<div align="center">	  <div><script type="text/javascript">document.write(myCalculOperation(100,25,1));</script></div>	  <div id="click101">		<a href="#jsenabled=no" class="uLigne" onclick="showMoreAnything(101,'#?jsenabled=no');return false;">Voir la réponse</a>	  </div>	</div>  </body></html>

Share this post


Link to post
Share on other sites

setInterval() is the usual method for calling functions over and over.document.getElementById("my_div").innerHTML = myText will put your function result inside the div.

Share this post


Link to post
Share on other sites

Thank you :)I've been able to do this.Now my problem is that at the start up the user need to click on the link to activate the auto answer.Any hint on this will be great :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="fr">  <head>	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">	<link rel="shortcut icon" href="favicon.ico">	<link rel="stylesheet" href="Matpatnik.css" type="text/css">	<title>Matpatnik Addition</title>	<script type="text/javascript">	function showMoreAnything(blocknum, isOpen) {	/* --Merci a http://www.scriptygoddess.com-- */		hid = ('hide' + (blocknum));		unhid = ('click' + (blocknum));		if(document.getElementById) {			if(document.getElementById(hid).style.display) {				if(isOpen != 0) {					document.getElementById(hid).style.display = "block";					document.getElementById(unhid).style.display = "none";				}else{					document.getElementById(hid).style.display = "none";					document.getElementById(unhid).style.display = "block";				}			}else{				location.href = isOpen;return true;			}		}else{			location.href = isOpen;			return true;		}	} 		function myCalculOperation(maxNumber, minNumber, operation) {		num2 = Math.round(Math.random() * maxNumber);		do {			num1 = Math.round(Math.random() * maxNumber);}		while (num1 < minNumber) 				switch (operation) {			case 1: 				document.getElementById("the_calcul").innerHTML = num1 +" + "+ num2 +"</div><div id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 + num2);			break;			case 2: 				document.getElementById("the_calcul").innerHTML = num1 +" - "+ num2 +"</div><div id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 - num2);			break;			case 3: 				document.getElementById("the_calcul").innerHTML = num1 +" x "+ num2 +"</div><div id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 * num2);			break;			case 4: 				document.getElementById("the_calcul").innerHTML = (num1 * num2) +" ÷ "+ num1 +"</div><div id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ num2;			break;		}	}		var t=5;	var int=self.setInterval("myConstructor()",1000);		function myConstructor() {		if (t == 0) {			document.getElementById("the_countdown").innerHTML = t--;			document.getElementById(hid).style.display = "block";			document.getElementById(unhid).style.display = "none";		} else if (t < 0) {			t = 5;			document.getElementById("the_countdown").innerHTML = "GO";			myCalculOperation(100,25,1);			document.getElementById(hid).style.display = "none";			document.getElementById(unhid).style.display = "block";		} else {			document.getElementById("the_countdown").innerHTML = t--;			document.getElementById(hid).style.display = "none";			document.getElementById(unhid).style.display = "block";		}	}	</script>  </head>  <body>	<div id="the_calcul" class="calcul"></div>	<div id="click101">	  <a href="#jsenabled=no" class="uLigne" onclick="showMoreAnything(101,'#?jsenabled=no');t=0;return false;">Voir la réponse</a>	</div>	<div id="the_countdown" class="calcul_countdown"></div>  </body></html>

I don't understand enough javascript yet but I think it have to do with the showMoreAnything() function.I will try to reverse the function to see what it will do.

Share this post


Link to post
Share on other sites

ok it work with Firefox but not with IE of course. :) I guess when I've look on IE it was still on cache :) and I still didn't figured out the click problem with the auto answer.I did some minor change:

<script type="text/javascript">		function showMoreAnything(blocknum, isOpen) {		/* --Merci a http://www.scriptygoddess.com-- */			hid = ('hide' + (blocknum));			unhid = ('click' + (blocknum));			if(document.getElementById) {				if(document.getElementById(hid).style.display) {					if(isOpen != 0) {						document.getElementById(hid).style.display = "block";						document.getElementById(unhid).style.display = "none";					}else{						document.getElementById(hid).style.display = "none";						document.getElementById(unhid).style.display = "block";					}				}else{					location.href = isOpen;return true;				}			}else{				location.href = isOpen;return true;			}		} 				function myCalculOperation() {num2 = Math.round(Math.random() * 10);			do {				num1 = Math.round(Math.random() * 10);			}while (num1 < 0) 						switch (0) {				case 1: 					document.getElementById("the_calcul").innerHTML = num1 +" + "+ num2 +"</div><div id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 + num2);				break;				case 2: 					document.getElementById("the_calcul").innerHTML = num1 +" - "+ num2 +"</div><div id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 - num2);				break;				case 3: 					document.getElementById("the_calcul").innerHTML = num1 +" x "+ num2 +"</div><div id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ (num1 * num2);				break;				case 4: 					document.getElementById("the_calcul").innerHTML = (num1 * num2) +" ÷ "+ num1 +"</div><div id=\"hide101\" style=\"display:none;\" align=\"left\">= "+ num2;				break;			}		}				var t=10;		var int=self.setInterval("myConstructor(101)",1000);		function myConstructor(blocknum) {			hid = ('hide' + (blocknum));			unhid = ('click' + (blocknum));			if (t == 0) {				document.getElementById("the_countdown").innerHTML = t--;				document.getElementById(hid).style.display = "block";				document.getElementById(unhid).style.display = "none";			} else if (t < 0) {				t = 10;				document.getElementById("the_countdown").innerHTML = "GO!";				myCalculOperation();				document.getElementById(hid).style.display = "none";				document.getElementById(unhid).style.display = "block";			}  else {				document.getElementById("the_countdown").innerHTML = t--;				document.getElementById(hid).style.display = "none";				document.getElementById(unhid).style.display = "block";			}		}	</script>  </head>  <body>	<div align="center">	  <div id="the_calcul" class="calcul"></div>	  <div id="click101">		<a href="#jsenabled=no" class="uLigne" onclick="showMoreAnything(101,'#?jsenabled=no');t=0;return false;">Voir la réponse</a>	  </div>	  <div id="the_countdown" class="calcul_countdown"></div>	</div>

Share this post


Link to post
Share on other sites

I loaded your doc and I get the countdown. Now, every time the counter says GO! your calcul() function is supposed to run. But look at this line:switch (0) { That will never work. I hope you understand why? Maybe just a typing error?

Share this post


Link to post
Share on other sites

Yes the switch (0) was a typing errorWe have no problem with FF and Opera.The countdown doesn't work on my 3 computers and my friends computer too with IE. It show the starting number but that's all and give me an error Line: 68, Char: 5, Error: Object required, Code: 0...

		function myConstructor(blocknum) {			hid = ('hide' + (blocknum));			unhid = ('click' + (blocknum));			if (t == 0) {				document.getElementById("the_countdown").innerHTML = t--;				document.getElementById(hid).style.display = "block";				document.getElementById(unhid).style.display = "none";			} else if (t < 0) {				t = 10;				document.getElementById("the_countdown").innerHTML = "GO!";				myCalculOperation();				document.getElementById(hid).style.display = "none";				document.getElementById(unhid).style.display = "block";			}  else {				document.getElementById("the_countdown").innerHTML = t--;				document.getElementById(hid).style.display = "none"; /* <--- It's this line  */				document.getElementById(unhid).style.display = "block";			}		}

Share this post


Link to post
Share on other sites

Object required means that something is undefined. One of these is undefined:document.getElementById(hid)document.getElementById(hid).style

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...