Program Not Working!

mwebster · 03-30-2009, 05:24 AM

Hey guys, I'm new to JavaScript and HTML and I am trying to make a program that works as a stopwatch. I don't think the program is even incorporating the .js file at all, but it's in the right directory and included as the correct name, so I'm not sure. It probably is being incorporated, but none of the functions are working. Here's my code:

homework06.html

Code:

<!--3.27.09-->
<!--Homework 6-->
<!--Create a stop watch-->
<html>

	<head>
		<title>Stop Watch</title>
		<script language="JavaScript" src="homework06.js"></script>
		<noscript><p>Your browser is not configured to run scripts</p></noscript>
		<style type="text/css">
			#time {text-align: center; font-size: 30px}
			#inputs {text-align: center}
		</style>
	</head>

	<body>
		<fieldset>
				<form name="stopwatch" id="stopwatch" action="" method="get">
						<p id="time">00:00:00</p>
				</form>
		</fieldset>
		<p id="inputs">
			<input type="button" value="Start" onclick="start()" />
			<input type="button" value="Stop" onclick="stop()" />
			<input type="button" value="Clear" onclick="empty()" />
		</p>
	</body
</html>

homework06.js

Code:

var hrs=0;
var mins=0;
var secs=0;
var interval;

function increment(){
	alert("incerment");
	if(mins<59&&secs<59){
		secs++:
	}else if(secs==59){
		if(mins==59){
			hrs++;
			mins=0;
			secs=0;
		}else{
			mins++;
			secs=0;
		}
	}
	print();
}

function print(){
	alert("print");
	alert(hrs+":"+mins+":"+secs);
	document.getElementById('time').innerHTML = hrs + ':' + mins + ':' +secs;
}

function empty(){
	alert("clear");
	hrs=0;
	mins=0;
	secs=0;
}


function stop(){
	alert("stop");
	clearInterval(interval);
}


function start(){
	alert("start");
	interval=setInterval("increment()", 1000);
}

TinyScript · 03-30-2009, 06:10 AM

You are missing some braces in your if/else and
secs++: should be secs++;
Turn off the alerts too or you get stuck in an endless loop of alerts

Code:

Try to fix it your self first. This works below, but you won't learn if you don't do it yourself.
<!--3.27.09-->
<!--Homework 6-->
<!--Create a stop watch-->
<html>

	<head>
		<title>Stop Watch</title>
		<script >
var hrs=0;
var mins=0;
var secs=0;
var interval;

function increment(){
	
	if(mins<59&&secs<59){
		secs++;
	}
else {
	if(secs==59){
		if(mins==59){
			hrs++;
			mins=0;
			secs=0;
				}
}else{
			mins++;
			secs=0;
		}
	}
	print();
}

function print(){
	
	//alert(hrs+":"+mins+":"+secs);
	document.getElementById('time').innerHTML = hrs + ':' + mins + ':' +secs;
}

function empty(){
	//alert("clear");
	hrs=0;
	mins=0;
	secs=0;
}


function stop(){
	//alert("stop");
	clearInterval(interval);
}


function start(){
	//alert('start');
	setInterval("increment()", 1000);
}
</script>
		<noscript><p>Your browser is not configured to run scripts</p></noscript>
		<style type="text/css">
			#time {text-align: center; font-size: 30px}
			#inputs {text-align: center}
		</style>
	</head>

	<body>
		<fieldset>
				<form name="stopwatch" id="stopwatch" action="" method="get">
						<p id="time">00:00:00</p>
				</form>
		</fieldset>
		<p id="inputs">
			<input type="button" value="Start" onclick="start()" />
			<input type="button" value="Stop" onclick="stop()" />
			<input type="button" value="Clear" onclick="empty()" />
		</p>
	</body
</html>