CODEWITHSUNDEEP
javascriptstopwatch
James Dunn
James Dunn

Reputation: 1

Second stop watch is failing

I am trying to do a simple page with 8 stop watches on in, The second stop watch is not functioning and I can’t seem to figure it out, any ideas? The first script works as it should however the second one when i go to hit start will give me one second, then i can pause and resume and get another second. It looks right to me but i am pretty new to this. 

			var time = 0;
			var running = 0;
			
			function startPause()
			{
				if(running == 0){
					running = 1;
					increment();
					document.getElementById("startPause").innerHTML = "Pause";
				}else{
					running = 0;
					document.getElementById("startPause").innerHTML = "Resume";
				}
			}
			
			function reset()
			{
				running = 0;
				time = 0;
				document.getElementById("startPause").innerHTML = "Start";
				document.getElementById("output").innerHTML = "00:00:00";
			}
			
			function increment()
			{
				if(running == 1){
					setTimeout(function(){
						time++;
						var mins = Math.floor(time/10/60);
						var secs = Math.floor(time/10 % 60);
						var tenths = time % 10;
						
						if(mins < 10){
							mins = "0" + mins;
						}
						if(secs < 10){
							secs = "0" + secs;
						}
						document.getElementById("output").innerHTML = mins + ":" + secs + ":" + "0" + tenths;
						increment();
						
					},100);
				}
			}
				var time2 = 0;
				var running2 = 0;
			
				function startPause2()
				{
					if(running2 == 0){
						running2 = 1;
						increment2();
						document.getElementById("startPause2").innerHTML = "Pause";
					}
					else{
						running2 = 0;
						document.getElementById("startPause2").innerHTML = "Resume";
					}
				}
			
				function reset2()
				{
					running2 = 0;
					time2 = 0;
					document.getElementById("startPause2").innerHTML = "Start";
					document.getElementById("output2").innerHTML = "00:00:00";
				}
			
				function increment2()
				{
					if(running2 == 1){
						setTimeout(function(){
							time2++;
							var mins2 = Math.floor(time2/10/60);
							var secs2 = Math.floor(time2/10 % 60);
							var tenths2 = time2 % 10;
						
							if(mins2 < 10){
								mins2 = "0" + mins2;
							}
							if(secs2 < 10){
								secs2 = "0" + secs2;
							}
							document.getElementById("output2").innerHTML = mins2 + ":" + secs2 + ":" + "0" + tenths2;
							increment();
						
						},100);
					}
				}
				
html {
	
	size: 100%,100%;
	background-color: #f2f2f2;
}

h1{
	font-Family: Arial;
	color: #5573A9;
	font-size: 40px;
	position: static;
}
	
	body {
		display: block;
		margin:8px, dotted line;
		background-color: #f2f2f2;
		
		
	}
	
	


#output{
	position:center;
				width:120px;
				height:25px;
				background-color:#CCC;
				border:3px solid #999;
			}
			
#output2{
	position: relative;
				width:120px;
				height:25px;
				background-color:#CCC;
				border:3px solid #999;
			}
			
			table {
				display:table;
				border-collapse:seperate;
				border-spacing: 52px;
				border-color: #FFF;
			}
<html>
	<head>
	<link rel="stylesheet" type="text/css" href="style.css">
		
		<title>Time Study</title>
		<h1>Time Study</h1>
	</head>
	
	<body>
	<table>
	<tr>
	<th>Bin</th>
	<th>Bulk</th>
	</tr>
	<tr>
	<td>
		<p id="output"></p>
		<div id="controls">
		<button id="startPause" onclick="startPause()">Start</button>
		<button onclick="reset()">Reset</button>
		</div>
		</td>
		<td>
		<p id="output2"></p>
		<div id="controls2">
		<button id="startPause2" onclick="startPause2()">Start</button>
		<button onclick="reset2()">Reset</button>
		</div>
		</td>
		</tr>
		</table>
	</body>
</html>

Upvotes: 0

Views: 74

Answers (1)

JonSG
JonSG

Reputation: 13067

The quick answer is:

In the case of your second timer, you are calling increment() when you need to call increment2().

The longer answer is:

This points out a flaw in the way you are attempting to solve this problem. If you eventually want 8 timers, this is going to be a big old mess.

What you want to do is to try to tackle the problem so that most of your code is reused rather than copied. If you would like help with that, let me know.

Look for my comment in the JS below for your fix.

var time = 0;
var running = 0;

function startPause() {
  if (running == 0) {
    running = 1;
    increment();
    document.getElementById("startPause").innerHTML = "Pause";
  } else {
    running = 0;
    document.getElementById("startPause").innerHTML = "Resume";
  }
}

function reset() {
  running = 0;
  time = 0;
  document.getElementById("startPause").innerHTML = "Start";
  document.getElementById("output").innerHTML = "00:00:00";
}

function increment() {
  if (running == 1) {
    setTimeout(function() {
      time++;
      var mins = Math.floor(time / 10 / 60);
      var secs = Math.floor(time / 10 % 60);
      var tenths = time % 10;

      if (mins < 10) {
        mins = "0" + mins;
      }

      if (secs < 10) {
        secs = "0" + secs;
      }

      document.getElementById("output").innerHTML = mins + ":" + secs + ":" + "0" + tenths;

      increment();

    }, 100);
  }
}
var time2 = 0;
var running2 = 0;

function startPause2() {
  if (running2 == 0) {
    running2 = 1;
    increment2();
    document.getElementById("startPause2").innerHTML = "Pause";
  } else {
    running2 = 0;
    document.getElementById("startPause2").innerHTML = "Resume";
  }
}

function reset2() {
  running2 = 0;
  time2 = 0;
  document.getElementById("startPause2").innerHTML = "Start";
  document.getElementById("output2").innerHTML = "00:00:00";
}

function increment2() {
  if (running2 == 1) {
    setTimeout(function() {
      time2++;
      var mins2 = Math.floor(time2 / 10 / 60);
      var secs2 = Math.floor(time2 / 10 % 60);
      var tenths2 = time2 % 10;

      if (mins2 < 10) {
        mins2 = "0" + mins2;
      }

      if (secs2 < 10) {
        secs2 = "0" + secs2;
      }

      document.getElementById("output2").innerHTML = mins2 + ":" + secs2 + ":" + "0" + tenths2;

      /// ===============================
      /// This is your fix
      /// ===============================
      // increment();
      increment2();
      /// ===============================

    }, 100);
  }
}
html {
  size: 100%, 100%;
  background-color: #f2f2f2;
}
h1 {
  font-Family: Arial;
  color: #5573A9;
  font-size: 40px;
  position: static;
}
body {
  display: block;
  margin: 8px, dotted line;
  background-color: #f2f2f2;
}
#output {
  position: center;
  width: 120px;
  height: 25px;
  background-color: #CCC;
  border: 3px solid #999;
}
#output2 {
  position: relative;
  width: 120px;
  height: 25px;
  background-color: #CCC;
  border: 3px solid #999;
}
table {
  display: table;
  border-collapse: seperate;
  border-spacing: 52px;
  border-color: #FFF;
}
<table>
  <tr>
    <th>Bin</th>
    <th>Bulk</th>
  </tr>
  <tr>
    <td>
      <p id="output"></p>
      <div id="controls">
        <button id="startPause" onclick="startPause()">Start</button>
        <button onclick="reset()">Reset</button>
      </div>
    </td>
    <td>
      <p id="output2"></p>
      <div id="controls2">
        <button id="startPause2" onclick="startPause2()">Start</button>
        <button onclick="reset2()">Reset</button>
      </div>
    </td>
  </tr>
</table>

Upvotes: 2

Related Questions