exit popup with Javascript

Question

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>

Answer 1

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

Answer 2

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