I have 2 popups on the same web page.
When someone clicks on the "Buy Now" link then "Buy Now Alert" should open. And I know this is working fine with onclick event.
When the user does not click on the "Buy Now" button within X seconds (I am taking 5 seconds in my example) then the "Feedback Popup" alert should appear. I used setTimeout to show the popup but I don't want the "Feedback Popup" to show up if someone has already clicked on the "Buy Now" link.
Right now if I click on "Buy Now" then I am getting "Buy Now alert" and also getting "Feedback Popup" alert as well.
I want to show only one popup based on my action -> If I click on "Buy Now" then Buy Now alert and if I don't click the buy now link then by default "Feedback Popup alert"
How can I stop showing "feedback popup" on click of the "Buy Now" button? Help appreciated (Note: I tried clearInterval but no luck :'( )
function func1() {
alert("Buy Now Popup");
}
const popup = document.querySelector(".popup");
window.onload = function () {
setTimeout(function () {
alert("Feedback Popup");
}, 5000);
};<header>
<h1>Modal Popup</h1>
</header>
<div>
<a href="#" class="modalButton" data-popup="popupOne" onclick="func1()">Model Popup</a>
</div>This is a little example usage to what you described.
The blue background will appear in 5 seconds if you do not click the button, but every click on the button you will reset the time.
var btnTimeout = null;
function resetTimeout(){
btnTimeout = setTimeout(() => {
// do whatever you want to do when time comes
document.body.style.background = "blue";
}, 5 * 1000); // example of 5 seconds for faster response (change to 60)
}
function doSomething(){
if(btnTimeout){
clearTimeout(btnTimeout);
}
resetTimeout();
// do whatever you want to do when click the btn
document.body.style.background = "red";
}
resetTimeout();<button onclick="doSomething()">Buy now (prevent blue from showing)</button>