<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";
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.