JS click event on multiple classes

Question

A little stuck here with the following code that works opening a modal on click with the class name '.pl-modal', however when using the class in multiple places it only works on the first element.

I'd like to understand why it doesn't work on multiple elements with the same class.

let player = null;
const $ = function (el) {
  return document.querySelector(el);
};
$(document).on("click", function () {
  $(".pl-modal").classList.add("pl-modal-active");
  player.playVideo();
},false);

function popupClose() {
  $(".pl-modal").classList.remove("pl-modal-active");
  $(".pl-hidden").style.display = "block";
  player.stopVideo();
  player.setPlaybackRate(1);
}
window.onclick = function (event) {
  if (event.target == $(".pl-modal")) {
    popupClose();
  }
};

Omri Attiya · Accepted Answer · 2021-07-16 11:55:51Z

1

Use query selector all and foreach:

document.querySelectorAll('.class1').forEach(element => element.addEventListener('click', event => {
  console.log(event.target.innerText);
}));

<div class="class1">text1</div>
<div class="class1">text2</div>
<div class="class1">text3</div>

Read here for more

answered Jul 16, 2021 at 11:55

Omri Attiya

4,0473 gold badges22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eugen Spinne · Accepted Answer · 2021-07-16 11:55:18Z

0

You have to use document.querySelectorAll instead of document.querySelector. querySelector only returns the first element.

answered Jul 16, 2021 at 11:55

Eugen Spinne

831 silver badge5 bronze badges

Collectives™ on Stack Overflow

JS click event on multiple classes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related