When I want to reset my stopwatch and start it again the timer begins at the stop-point of the previous timer execution but I want that the timer begins at zero. I tried different ways to solve this problem but my tries did not work. What is my failure? The considered area in my JavaScript is marked up.
JavaScript
x
89
89
1
window.onload = function () {2
//global variables3
4
let interval = null;5
let timerId = null;6
let y = 3.90;7
let reversal = 208
const output = document.querySelector('output');9
let maintime = document.getElementById('maintime');10
const start = document.getElementById('actioner');11
const clear = document.getElementById('reseter');12
let [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];13
14
//If start is clicked15
start.addEventListener('click', () => {16
buttonAndTimer();17
startDrive();18
19
}); // end of func20
21
function buttonAndTimer() {22
start.innerText = 'Stop';23
if (!interval) {24
interval = setInterval(() => {25
run();26
}, 10);27
} else {28
clearInterval(interval)29
start.innerText = 'Resume';30
interval = null;31
};32
}33
34
function run() {35
milliseconds += 10;36
if (milliseconds == 1000) { //note: 1000 milliseconds are 1 seconds37
milliseconds = 0;38
seconds++;39
};40
if (seconds == 60) {41
seconds = 0;42
minutes++;43
};44
if (minutes == 60) {45
minutes == 046
hours++;47
};48
49
h = hours < 10 ? '0' + hours : hours;50
m = minutes < 10 ? '0' + minutes : minutes;51
s = seconds < 10 ? '0' + seconds : seconds;52
ms = milliseconds < 100 ? '00' + milliseconds : milliseconds;53
54
//Template Literals 55
maintime.innerHTML = `${h} : ${m} : ${s} : ${ms} `56
};57
58
//calculating price59
function startDrive() {60
if (start.innerText != 'Resume') {61
output.innerHTML = y.toFixed(2) + '€';62
timerId = setInterval(() => {63
if (y < reversal) {64
y += 0.14375;65
} else if (y > reversal) {66
y += 0.103125;67
}68
output.innerHTML = y.toFixed(2) + "€";69
}, 5000);70
}71
/*Considered area */72
if (start.innerText == 'Resume') {73
74
clearInterval(timerId);75
}76
77
} //end of func78
79
// considered area80
clear.addEventListener('click', () => {81
clearInterval(interval);82
interval = null;83
maintime.innerHTML = '00:00:00:000';84
start.innerText = 'Start'85
clearInterval(timerId);86
timerId = 0;87
output.innerHTML = "";88
})89
} //end of window.loadJavaScript
1
49
49
1
#box {2
display: flex;3
justify-content: center;4
align-items:center;5
flex-direction: column;6
gap: 5px;7
8
}9
10
span, #maintime{11
color:#74bde0;12
width:15vh;13
text-align: center;14
max-width:20vh; 15
}16
17
.button {18
border:none;19
border-radius: 30px;20
cursor: pointer;21
color:#74bde0;22
box-shadow: 1px 1px 1px;23
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;24
25
26
}27
28
output {29
border: 1px solid;30
border-color:#74bde0 ;31
border-radius: 5px;32
height: 10vh;33
width: 30vh;34
text-align: center;35
color:#74bde0;36
line-height: 500%;37
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;38
}39
40
#card {41
background-color: #2f2f2f;42
width: 80vh;43
height: 10vh;44
border:1px solid;45
border-color:blueviolet;46
border-radius: 30px;47
48
49
}JavaScript
1
14
14
1
<body>2
<div id="box">3
<button class='button' id='actioner'>Start</button>4
<output></output>5
<button class='button' id='reseter'>Reset</button>6
<div id='mainstopwatch'>7
<div id='maintime'>8
<span class='span' id="mainhour">00:</span>9
<span class='span' id="mainminute">00:</span>10
<span class='span' id="mainsecond">00:</span>11
<span class='span' id="milliseconds">000</span>12
</div>13
</div>14
</body>Advertisement
Answer
Fixed it.. I hope this is acceptable answer..
JavaScript
1
96
96
1
window.onload = function () {2
//global variables3
4
let interval = null;5
let timerId = null;6
let y = 3.90;7
let reversal = 208
const output = document.querySelector('output');9
let maintime = document.getElementById('maintime');10
const start = document.getElementById('actioner');11
const clear = document.getElementById('reseter');12
let [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];13
14
//If start is clicked15
start.addEventListener('click', () => {16
console.log("start clicked.. ")17
buttonAndTimer();18
startDrive();19
20
}); // end of func21
22
function buttonAndTimer() {23
start.innerText = 'Stop';24
if (!interval) {25
interval = setInterval(() => {26
run();27
}, 10);28
} else {29
clearInterval(interval)30
start.innerText = 'Resume';31
interval = null;32
};33
}34
35
function run() {36
milliseconds += 10;37
if (milliseconds == 1000) { //note: 1000 milliseconds are 1 seconds38
milliseconds = 0;39
seconds++;40
};41
if (seconds == 60) {42
seconds = 0;43
minutes++;44
};45
if (minutes == 60) {46
minutes == 047
hours++;48
};49
50
h = hours < 10 ? '0' + hours : hours;51
m = minutes < 10 ? '0' + minutes : minutes;52
s = seconds < 10 ? '0' + seconds : seconds;53
ms = milliseconds < 100 ? '00' + milliseconds : milliseconds;54
55
//Template Literals 56
maintime.innerHTML = `${h} : ${m} : ${s} : ${ms} `57
};58
59
//calculating price60
function startDrive() {61
if (start.innerText != 'Resume') {62
output.innerHTML = y.toFixed(2) + '€';63
timerId = setInterval(() => {64
if (y < reversal) {65
y += 0.14375;66
} else if (y > reversal) {67
y += 0.103125;68
}69
output.innerHTML = y.toFixed(2) + "€";70
}, 5000);71
}72
/*Considered area */73
if (start.innerText == 'Resume') {74
75
clearInterval(timerId);76
}77
78
} //end of func79
80
// considered area81
clear.addEventListener('click', () => {82
console.log("clear clicked.. ")83
clearInterval(interval);84
interval = null;85
maintime.innerHTML = '00:00:00:000';86
start.innerText = 'Start'87
clearInterval(timerId);88
timerId = 0;89
output.innerHTML = "";90
milliseconds = 0 91
seconds = 0 92
minutes = 0 93
hours = 094
})95
} //end of96