I have some code that shows a popup when hovering over the .acfef-submit-button element. However, I only want this to happen once. How can I adjust this code to only allow the popup to appear once?
document.addEventListener('DOMContentLoaded', function() {
let elements = document.querySelectorAll( '.acfef-submit-button' );
let popupposts = ['6033'];
elements.forEach(function(e,i){
e.addEventListener( 'mouseenter', function(){
elementorProFrontend.modules.popup.showPopup( { id: popupposts[i] } );
} );
});
});
After the function, add an option object with {once: true}
Use {once: true} so that function run only once :
document.addEventListener('DOMContentLoaded', function() {
let elements = document.querySelectorAll( '.acfef-submit-button' );
let popupposts = ['6033'];
elements.forEach(function(e,i){
e.addEventListener( 'mouseenter', function(){
elementorProFrontend.modules.popup.showPopup( { id: popupposts[i] } );
} );
});
}, {once: true});
It's a little hacky but setting a viewed boolean would work.
document.addEventListener('DOMContentLoaded', function () {
let elements = document.querySelectorAll('.acfef-submit-button');
let popupposts = ['6033'];
let viewed = false; // or set this in the first loop if you need to
elements.forEach(function (e, i) {
e.addEventListener('mouseenter', function () {
if (viewed === false) {
elementorProFrontend.modules.popup.showPopup({ id: popupposts[i] });
viewed = true;
}
});
});
});