Javascript: I’m trying to manipulate HTML by adding a class to an element


I am trying to add .hidden to 2 classes. However after running the code I can’t get the if statement to check changed status in the website once a change was made. OVERALL GOAL: Once clicked outside of Modal I want Modal to close.

const modalButtons = document.querySelectorAll('.show-modal');

const modal = document.querySelector('.modal');

const closeModal = document.querySelector('.close-modal');

const overlay = document.querySelector('.overlay');

const body = document.body;
    for (let i = 0; i < modalButtons.length; i++) {
      modalButtons[i].addEventListener('click', function () {
        modal.classList.remove('hidden');
        overlay.classList.remove('hidden');
      });
    if (!modal.classList.contains('hidden')) {
        modal.addEventListener('click', function (e) {
          if (modal.contains(e.target)) {
          } else {
            modal.classList.add('hidden');
            overlay.classList.add('hidden');
          }
        });
      } 
    }



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here