How do I stop this clock in JavaScript

Question

I am having trouble to find the way to stop this clock in JavaScript

I was expecting the clock to stop working after pressing stop but it keeps going

<!DOCTYPE html>
<html>
<head>  
 
<h1> Welcome to the clock. Press the stop button to stop the clock <h1>
<h2> This clock goes for 24 hours at 100 miloseconds</h2>
<div id="clock"></div>
<script>
const clockElement = document.querySelector('#clock');
 
const stopButton = document.querySelector('#stopbutton');
 
let clockInterval = setInterval(() => {
 
let currentTime = new Date();
 
clockElement.innerHTML = currentTime.toLocaleTimeString();
}, 100);
 
stopButton.addEventListener('click', () => {
  clearInterval(clockInterval);
});
</script>
<button id="stopbutton">Stop</button>

Your button must be placed before the `script` element. You currently cannot select it because it isn't in the DOM yet. — Spectric, Dec 17 '22 at 20:27

score 1 · Answer 1 · edited Dec 17 '22 at 20:39

1

The code in the script tag is running before the browser "rendered" the button. You should put the button element above the script tag or tell the code to wait until the entire website has loaded with window.onload

edited Dec 17 '22 at 20:39

Hidayt Rahman

2,490
26
32

answered Dec 17 '22 at 20:34

Taureon

75
1
9

score 0 · Answer 2 · answered Dec 17 '22 at 20:41

0

Move this to the end of code should work, it will explain what happened

<script>
const stopButton = document.querySelector('#stopbutton');
stopButton.addEventListener('click', () => {
  clearInterval(clockInterval);
});
</script>

answered Dec 17 '22 at 20:41

Nate Cheng

414
6
11

How do I stop this clock in JavaScript

2 Answers2