html - multiple button - for loop wont execute so buttons don't work - javascript

Question

Trying to add modal windows to my first web page created. Without the for loop it actually work but since I want more than one button and window, I tried to use for loop to check each button. I got no error code in the consol but when pressing the button nothing happen. Like the for loop does not activate at all. Can't see any error in the code so hopefully a second pair of eyes can spot the problem.

const modal = document.querySelector(".modal");
const overlay = document.querySelector(".overlay");
const btnCloseModal = document.querySelector(".close-modal-btn");
const btnsOpenModal = document.querySelector(".open-modal-btn");

const openModal = function() {
  console.log("Button clicked");
  modal.classList.remove("hidden");
  overlay.classList.remove("hidden");
};

const closeModal = function() {
  modal.classList.add("hidden");
  overlay.classList.add("hidden");
};

for (let i = 0; i < btnsOpenModal.length; i++)
  btnsOpenModal[i].addEventListener("click", openModal);

btnCloseModal.addEventListener("click", closeModal);

overlay.addEventListener("click", closeModal);

document.addEventListener("keydown", function(event) {
  if (event.key === "Escape" && !modal.classList.contains("hidden")) {
    closeModal();
  }
});

<button class="open-modal-btn">Privat personer</button>
<button class="open-modal-btn">F?retag</button>
<div class="modal hidden">
  <button class="close-modal-btn">&times;</button>
  <h1>First</h1>
  <p>
    Modulf?nster f?r privatpersoner och vilka tj?nster som ing?r h?r.
  </p>
</div>

<div class="modal hidden">
  <button class="close-modal-btn">&times;</button>
  <h1>Second</h1>
  <p>
    Modulf?nster f?r f?retag och vilka tj?nster som ing?r h?r.
  </p>
</div>
<div class="overlay hidden"></div>

Answer 1

There is a problem with the querySelector function it won't return the array of elements instead of that you can use

const btnsOpenModal = document.getElementsByClassName("open-modal-btn");

or

const btnsOpenModal = document.querySelectorAll(".open-modal-btn");

const modal = document.querySelector(".modal");
const overlay = document.querySelector(".overlay");
const btnCloseModal = document.querySelector(".close-modal-btn");
const btnsOpenModal = document.getElementsByClassName("open-modal-btn");
const openModal = function () {
  console.log("Button clicked");
  modal.classList.remove("hidden");
  overlay.classList.remove("hidden");
};

const closeModal = function () {
  modal.classList.add("hidden");
  overlay.classList.add("hidden");
};

for (let i = 0; i < btnsOpenModal.length; i++)
  btnsOpenModal[i].addEventListener("click", openModal);

btnCloseModal.addEventListener("click", closeModal);

overlay.addEventListener("click", closeModal);

document.addEventListener("keydown", function (event) {
  if (event.key === "Escape" && !modal.classList.contains("hidden")) {
    closeModal();
  }
})

<button class="open-modal-btn">Privat personer</button>
  <button class="open-modal-btn">F?retag</button>
  <div class="modal hidden">
    <button class="close-modal-btn">&times;</button>
    <h1>First</h1>
    <p>
      Modulf?nster f?r privatpersoner och vilka tj?nster som ing?r h?r.
    </p>
  </div>

    <div class="modal hidden">
    <button class="close-modal-btn">&times;</button>
    <h1>Second</h1>
    <p>
      Modulf?nster f?r f?retag och vilka tj?nster som ing?r h?r.
   </p>
  </div>
  <div class="overlay hidden"></div>