web-dev-qa-db-fra.com

addEventListener sur un querySelectorAll () avec classList

J'essaye d'ajouter un écouteur d'événement mais aucun résultat n'est venu. Je sais que JavaScript a une fonction de levage, mais je crois que j'ai tout essayé sauf la bonne solution.

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 je fais?

javascriptaddeventlistener
5
Evan

Il existe certaines différences entre le code et le lien que vous avez fourni. Il n'y a pas de fonction doit() là-dedans. Vous avez attaché addEvenListener au NodeList dans 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>
1
Mamun

Vous pouvez vous forEach sur la classe ou vous pouvez 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);
  }
);

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

EventDelgation

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.

0
Riad ZT