I'm making a stopwatch with seconds, minutes, and hours. I want the stopwatch to reset and restart after the hours reach 59. Also, when minutes reach 59 I want the hour hands to increment. It doesn't seem to work. The left hour "hand", if you will, won't increment.. even when I stated that I wanted it to.
PLEASE NOTE SPEED "5" ON SETTIMEOUT. I SPED IT UP TO TEST HOURS. SHOULD BE "1000".
HTML:
<ul>
<li id="hour-greater">0</li>
<li id="hour-lesser">0</li>
<li>:</li>
<li id="min-greater">0</li>
<li id="min-lesser">0</li>
<li>:</li>
<li id="sec-greater">0</li>
<li id="sec-lesser">0</li>
</ul>
JS:
(function() {
var secLesser = document.getElementById("sec-lesser").value,
secGreater = document.getElementById("sec-greater").value,
minLesser = document.getElementById("min-lesser").value,
minGreater = document.getElementById("min-greater").value,
hourLesser = document.getElementById("hour-lesser").value,
hourGreater = document.getElementById("hour-greater").value;
function stopWatch(){
secLesser++;
if(secLesser > 9) {
secLesser = 0;
secGreater++;
} else if(secGreater + secLesser == 14){
secGreater = 0;
secLesser = 0;
minLesser++;
} else if(minLesser > 9){
minLesser = 0;
minGreater++;
} else if(minGreater + minLesser == 14){
secGreater = 0;
secLesser = 0;
hourLesser++;
} else if(hourLesser > 9){
hourLesser = 0;
hourGreater++;
} else if(hourGreater + hourLesser == 14){
alert("It's been 59 hours... leave this page!");
}
document.getElementById("sec-lesser").textContent = secLesser;
document.getElementById("sec-greater").textContent = secGreater;
document.getElementById("min-lesser").textContent = minLesser;
document.getElementById("min-greater").textContent = minGreater;
document.getElementById("hour-lesser").textContent = hourLesser;
document.getElementById("hour-greater").textContent = hourGreater;
window.setTimeout(stopWatch, 5);
}
stopWatch();
})();
the part where you have
} else if(minGreater + minLesser == 14){
secGreater = 0;
secLesser = 0;
hourLesser++;
should be resetting minGreater and minLesser not secGreater/secLesser. Change it to:
} else if(minGreater + minLesser == 14){
minGreater = 0;
minLesser = 0;
hourLesser++;
Oh and look into requestAnimationFrame as better alternative to setTimeout/setInterval.