Help me please!

Question

tcollins412 0 Junior Poster

13 Years Ago

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

javascript

3 Contributors
19 Replies
311 Views
2 Days Discussion Span
Latest Post 13 Years Ago Latest Post by @developer

momoh 0 Newbie Poster

13 Years Ago

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

@developer 3 Junior Poster in Training

13 Years Ago

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>

@developer 3 Junior Poster in Training

13 Years Ago

In setTimeOut change 3000 to 30000, currently the timer is for 3 seconds.

@developer 3 Junior Poster in Training

13 Years Ago

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>

@developer 3 Junior Poster in Training

13 Years Ago

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

clearTimeout(t);
	clearTimeout(counters);

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

tcollins412 0 Junior Poster · Answer 1 · 2010-12-14T19:38:49+00:00

tcollins412 0 Junior Poster

13 Years Ago

No offense, but that did not help at all

tcollins412 0 Junior Poster · Answer 2 · 2010-12-14T20:34:51+00:00

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

tcollins412 0 Junior Poster · Answer 3 · 2010-12-15T18:09:13+00:00

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

@developer 3 Junior Poster in Training · Answer 4 · 2010-12-15T19:50:47+00:00

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>

tcollins412 0 Junior Poster · Answer 5 · 2010-12-15T19:55:25+00:00

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

tcollins412 0 Junior Poster · Answer 6 · 2010-12-15T19:56:28+00:00

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

@developer 3 Junior Poster in Training · Answer 7 · 2010-12-15T20:02:00+00:00

@developer 3 Junior Poster in Training

13 Years Ago

Did you mean the 'Increment' button?

tcollins412 0 Junior Poster · Answer 8 · 2010-12-15T20:12:10+00:00

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

@developer 3 Junior Poster in Training · Answer 9 · 2010-12-15T20:15:14+00:00

@developer 3 Junior Poster in Training

13 Years Ago

After the 'increment' button get disabled?

tcollins412 0 Junior Poster · Answer 10 · 2010-12-15T20:25:49+00:00

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?

@developer 3 Junior Poster in Training · Answer 11 · 2010-12-15T20:30:08+00:00

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

@developer 3 Junior Poster in Training · Answer 12 · 2010-12-15T20:33:46+00:00

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>

tcollins412 0 Junior Poster · Answer 13 · 2010-12-15T20:40:37+00:00

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?

@developer 3 Junior Poster in Training · Answer 14 · 2010-12-16T19:13:31+00:00

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.