I'm trying to exit a popup with JS. I've just followed a tutorial but nothing happens on my popup I'm just thinking if this is a class problem maybe I'm pointing to the wrong class but I've tried everything i know my pop-up can't work at this moment but i'm at the beginning of my project
here's the link of the tutorial i've followed : https://www.webtips.dev/how-to-make-an-effective-exit-intent-popup-in-javascript
const exit = (e) => {
if (e.target.className === "close") {
// user click on the close button
document.querySelector(".modal-body").classList.remove("visible");
}
};
document.querySelector(".modal-body").addEventListener("click", exit);<div class="bground">
<div class="content">
<span class="close"></span>
<div class="modal-body">
<form
name="reserve"
action="index.html"
method="get"
onsubmit="return validate();"
>
<div
class="formData">
<label>Prénom</label><br>
<input
class="text-control"
type="text"
id="first"
name="first"
minlength="2"
/><br>
<br>
<input class="checkbox-input" type="checkbox" id="checkbox2" />
<label class="checkbox2-label" for="checkbox2">
<span class="checkbox-icon"></span>
Je Je souhaite être prévenu des prochains évènements.
</label>
<br>
</div>
<input
class="btn-submit"
type="submit"
class="button"
value="C'est parti"
/>
</form>
</div>
</div>
</div>I think you have wrong class in eventHandler here:
document.querySelector(".modal-body").addEventListener("click", exit);
should be:
document.querySelector(".close").addEventListener("click", exit);
Check this sandbox: https://codesandbox.io/s/stoic-hellman-3x9y2s?file=/src/index.js
The Element with .close is outside the .modal-body when performing the click event, the supplied event object does not contain the class you are looking for. As a starting point to debug, you can just console.log(e); and see whats in that particular object