Disabled button with countdown to enable
Hello,
Im seeing visitors are closing out of an important note within ms of it opening. I want to add a close button that starts disabled, counts down from 3, and then is enabled. I have the following code done, and it works well in a test enviromation, but I can seem to get it to play with Pendo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<!-- The Modal with the button -->
<div id="pendo-guide-container">
<button id="countdownBtn" disabled>Countdown: <span id="countdown">3</span></button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get the modal and button elements
var modal = document.getElementById('pendo-guide-container');
var countdownBtn = document.getElementById('countdownBtn');
var countdownDisplay = document.getElementById('countdown');
// Function to update the countdown
function updateCountdown(count) {
countdownDisplay.innerText = count;
if (count === 0) {
countdownBtn.disabled = false;
countdownDisplay.innerText = "Enabled!";
}
}
// Function to start the countdown
function startCountdown() {
var count = 3;
countdownBtn.disabled = true;
// Update the countdown every second
function update() {
updateCountdown(count);
// When countdown reaches zero, clear the interval
if (count === 0) {
clearInterval(countdownInterval);
}
count--;
}
update(); // Initial update
var countdownInterval = setInterval(update, 1000);
}
// Automatically open the modal and start countdown
modal.style.display = 'block';
startCountdown();
// Button click event to close the modal
countdownBtn.addEventListener('click', function () {
modal.style.display = 'none';
});
});
</script>
</body>
</html>
Comments
Please sign in to leave a comment.