addEventListener sur un querySelectorAll() avec classList

Question

J'essaie d'ajouter un récepteur d'événements mais je n'obtiens aucun résultat. Je sais que Javascript dispose d'une fonction de levage mais je crois avoir tout essayé sauf la bonne solution. Stylo

const cbox = document.querySelectorAll(".box");
function doit() {
    for(let i = 0; i < cbox.length; i++){
        cbox[i].classList.add("red");
    }
}
cbox.addEventListener("click", doit,false);

Quelqu'un peut-il repérer l'erreur que j'ai commise ? Merci de votre compréhension.

Answer 1

Il y a des différences entre le code et le lien que vous avez fourni. Il n'y a pas de fonction doit() là-dedans. Vous avez joint addEvenListener a la NodeList en cbox.addEventListener("click",.....

Essayez ce qui suit :

const cbox = document.querySelectorAll(".box");

 for (let i = 0; i < cbox.length; i++) {
     cbox[i].addEventListener("click", function() {
       cbox[i].classList.toggle("red");
     });
 }

*,
html,
body {
    padding: 0;
    margin: 0;
}

.box {
    width: 10rem;
    height: 10rem;
    background-color: yellowgreen;
    float: left;
    position: relative;
    margin: 0.5rem;
    transition: .5s all;
}

h3 {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.box:not(:first-child) {
    margin-left: 1rem;
}

.red {
    background-color: orangered;
}

<div id="box1" class="box box1">
    <h3>Box 1</h3>
</div>
<div id="box2" class="box box2">
    <h3>Box 2</h3>
</div>
<div id="box3" class="box box3">
    <h3>Box 3</h3>
</div>
<div id="box4" class="box box4">
    <h3>Box 4</h3>
</div>

Answer 2

Vous pouvez utiliser la méthode forEach sur la classe ou utiliser la délégation d'événements.

const cboxes = document.querySelectorAll(".box");
function doit() {
    ... do something ...
}
cboxes.forEach(
  function(cbox) {
   cbox.addEventListener("click", doit,false);
  }
);

Remarquez que j'ai changé le nom de votre variable.

Délai d'attente

HTML :

<div id="parent">
  <div id="box1" class="box box1">
    <h3>Box 1</h3>
  </div>
  <div id="box2" class="box box2">
      <h3>Box 2</h3>
  </div>
  <div id="box3" class="box box3">
      <h3>Box 3</h3>
  </div>
  <div id="box4" class="box box4">
      <h3>Box 4</h3>
  </div>
</div>

La partie JS :

const parent = document.querySelector("#parent");

parent.addEventListener('click', (e) => {
  e.target.classList.add('red');
  console.log(e.target);
});

La délégation d'événements est bien meilleure et utilise moins de ressources, car vous n'utilisez qu'un seul écouteur d'événements et aucune boucle for.