<h1 class="text">JavaScript setTimeout() Example 4</h1>
<h2 class="text">Want to wait for a message to appear after 10 seconds?</h2>

<p class="text" id="message1"></p>

<div class="btn">
  <button id="stop">Stop Timer</button>
</div>
.text {
  text-align: center;
}

.btn {
  display: flex;
  justify-content: center;
}

button {
  cursor: pointer;
}
const timerMsg = document.getElementById("message1");
const stopBtn = document.getElementById("stop");

function timerMessage() {
  timerMsg.innerHTML = "Thanks for waiting!";
}

let timeoutID = setTimeout(timerMessage, 10000);

stopBtn.addEventListener("click", () => {
  clearTimeout(timeoutID);
  timerMsg.innerHTML = "Timer was stopped";
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.