0

I am writing a JavaScript program that you click the mouse on a button and it shows how many times you have pressed the button. here is the JavaScript for it

<script language="javascript">
var numcount=0;

function increasecounter(){

numcount++;

document.getElementById('countdiv').innerHTML=numcount;

}




</script>

and here is the html:

<div id='countdiv'>0</div><br/>
<input type=submit onclick="increasecounter();" value="Increment"></br>
<div id='time'></div><div id='score'></div><br/><input type='button' value='reset'>

now with that said, i would like to have a 30 second timer in the 'time' div. and when the timer goes off, i want the counter to stop counting the button clicks and show the score in the 'score' div. then when you click the 'reset' button the timer resets. how would i do this? if somebody could help me that would be GREATLY appreciated

3
Contributors
19
Replies
20
Views
6 Years
Discussion Span
Last Post by @developer
0

the 1st part; i have never come across the script tag you used...
--> <script type="text/javascript"> ... </script>

bear in mind also that it is always easier to state the problem you encountered during an attempt

To the second part; you should consider using javascript timer functions...
you seem fairly ok with javascript so it should be no problem for you.

http://www.w3schools.com/js/js_timing.asp

0

Try this. Not sure whether that's what you need.

<body>
	<div id='countdiv'>0</div><br/>
	<input type="button" id="incrementBtn" onclick="increasecounter();" value="Increment"></br>
	<div id='time'></div>
	<div id='score'></div><br/>
	<input type='button' value='reset' onclick="reset()">
</body>



<script>
numcount=0;
t=setTimeout("test()",3000);
document.getElementById("incrementBtn").disabled=false;
timer_on = 1;

function increasecounter()
{
	timer_on = 1;
	numcount++;
	document.getElementById('countdiv').innerHTML=numcount;
	t=setTimeout("test()",3000);
}

function test()
{
	if(timer_on)
	{
		timer_on=0;
		document.getElementById("incrementBtn").disabled="true";
		document.getElementById("score").innerHTML = document.getElementById("countdiv").innerHTML;
	}	
}

function reset()
{
	timer_on = 0;
	numcount=0;
	document.getElementById("incrementBtn").disabled=false;
	document.getElementById("countdiv").innerHTML = 0;
	document.getElementById("score").innerHTML = "";
}
</script>
0

thank you! but how do i make it so it shows how much time is left in the 'time' div?

0

Use this script.

<script>
numcount=0;
t=setTimeout("test()",30000);
document.getElementById("incrementBtn").disabled=false;
timer_on = 1;
count = 30;
counter();
counterSet = 0;

function increasecounter()
{
	timer_on = 1;
	numcount++;
	document.getElementById('countdiv').innerHTML=numcount;
	t=setTimeout("test()",30000);
	if(!counterset)
	{
		counter();
	}	
}

function test()
{
	if(timer_on)
	{
		timer_on=0;
		counterset = 0;
		document.getElementById("incrementBtn").disabled="true";
		document.getElementById("score").innerHTML = document.getElementById("countdiv").innerHTML;
	}	
}

function reset()
{
	timer_on = 0;
	numcount=0;
	count = 30;
	counterset = 0;
	
	document.getElementById("incrementBtn").disabled=false;
	document.getElementById("countdiv").innerHTML = 0;
	document.getElementById("score").innerHTML = "";
	document.getElementById("time").innerHTML = "";
}

function counter()
{
	counterset = 1;
	if(count >= 0)
	{
		document.getElementById("time").innerHTML = count;
		count = count - 1;
		counters = setTimeout("counter()",1000);
	}
}
</script>
0

Also please add these two lines in function reset() after counterset.

clearTimeout(t);
	clearTimeout(counters);
0

it doesnt work right- whenever i click the increment button the timer doesnt start for a couple of seconds then it ends early. once i hit reset, it only lets you click the button once, then the button is disabled

0

Sorry for the previous code, didn't check with that.Try with this script, hope this works fine.

<script>
numcount=0;
document.getElementById("incrementBtn").disabled=false;
timer_on = 0;
count = 30;
var counterSet = 0;
var t;

function increasecounter()
{
	numcount++;
	document.getElementById('countdiv').innerHTML=numcount;
	if(!timer_on)
	{
		t=setTimeout("test()",30000);
		timer_on = 1;
	}	
	if(!counterSet)
	{
		counter();
	}	
}

function test()
{
	timer_on=0;
	document.getElementById("incrementBtn").disabled="true";
	document.getElementById("score").innerHTML = document.getElementById("countdiv").innerHTML;
}

function reset()
{
	timer_on = 0;
	numcount=0;
	count = 30;
	counterSet = 0;
	clearTimeout(t);
	clearTimeout(counters);
	
	document.getElementById("incrementBtn").disabled=false;
	document.getElementById("countdiv").innerHTML = 0;
	document.getElementById("score").innerHTML = "";
	document.getElementById("time").innerHTML = "";
}

function counter()
{
	counterSet = 1;
	if(count >= 0)
	{
		document.getElementById("time").innerHTML = count;
		count = count - 1;
		counters = setTimeout("counter()",1000);
	}
}
</script>
0

this one only works if you press the reset button first.... can you please fix that? sorry if im being too picky

0

this one only works if you press 'reset' first...... can you please fix that? sorry if im being too picky

0

no. in order for the timer to start, you need to press the reset button then the 'increment' button

0

no. can you make so when you first open the page, all you need to do is press the increment button for the timer to start?

0

Its working like that now. When you first open the page you only need to click the 'increment button'.

0

I have to go nw...I will give the entire code that I have with me now...It seems working fine..

<body>
	Increment:
	<div id='countdiv'>0</div><br/>
	<input type="button" id="incrementBtn" onclick="increasecounter();" value="Increment"></br>
	Counter:
	<div id='time'></div>
	Score:
	<div id='score'></div><br/>
	<input type='button' value='reset' onclick="reset()">
</body>

<script>
numcount=0;
document.getElementById("incrementBtn").disabled=false;
timer_on = 0;
count = 30;
var counterSet = 0;
var t;

function increasecounter()
{
	numcount++;
	document.getElementById('countdiv').innerHTML=numcount;
	if(!timer_on)
	{
		t=setTimeout("test()",30000);
		timer_on = 1;
	}	
	if(!counterSet)
	{
		counter();
	}	
}

function test()
{
	timer_on=0;
	document.getElementById("incrementBtn").disabled="true";
	document.getElementById("score").innerHTML = document.getElementById("countdiv").innerHTML;
}

function reset()
{
	timer_on = 0;
	numcount=0;
	count = 30;
	counterSet = 0;
	clearTimeout(t);
	clearTimeout(counters);
	
	document.getElementById("incrementBtn").disabled=false;
	document.getElementById("countdiv").innerHTML = 0;
	document.getElementById("score").innerHTML = "";
	document.getElementById("time").innerHTML = "";
}

function counter()
{
	counterSet = 1;
	if(count >= 0)
	{
		document.getElementById("time").innerHTML = count;
		count = count - 1;
		counters = setTimeout("counter()",1000);
	}
}
</script>
0

thank you sooooo much! works perfect! and i know this pobabily isnt the right forumn, but how would i make a 'submit score' page in php?

0

Just put your code within a form and give action and method to it.

<form action="submitPage.php" method="post">
  <!-- Code here,No javascript here -->
</form>

Also make your score an input text field or keep the value in hidden field. Create a submit button within the form.On clicking it will submit the form.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.