addEventListener on a querySelectorAll() with classList [duplicate]

by

There are some dissimilarities between the code and the link you have provided. There is no function doit() in there.

You have attached addEvenListener to the NodeList in cbox.addEventListener("click",....., you have to loop through the list and attach the event to the current element:

Try the following: 

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>

You can also use Array.prototype.forEach() with arrow function syntax that will allow you to achieve the same with less code:

let cbox = document.querySelectorAll(".box");
cbox.forEach(box => {
  box.addEventListener('click', () => box.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>

More Related Contents:

  1. addEventListener vs onclick
  2. How to trigger event in JavaScript?
  3. How to pass arguments to addEventListener listener function?
  4. JS li tag onclick not working on IE8
  5. addEventListener using for loop and passing values [duplicate]
  6. addEventListener in Internet Explorer
  7. addEventListener not working in IE8
  8. MSIE and addEventListener Problem in Javascript?
  9. add event listener on elements created dynamically
  10. Javascript removeEventListener not working
  11. Javascript – How to detect if document has loaded (IE 7/Firefox 3)
  12. Javascript “addEventListener” Event Fires on Page Load [duplicate]
  13. How to check whether dynamically attached event listener exists or not?
  14. Cannot read property ‘addEventListener’ of null
  15. Binding multiple events to a listener (without JQuery)?
  16. How to remove all listeners in an element? [duplicate]
  17. Correct usage of addEventListener() / attachEvent()?
  18. Removing an anonymous event listener
  19. Adding click event handler to iframe
  20. Want to add “addEventListener” on multiple elements with same class [duplicate]
  21. JavaScript listener, “keypress” doesn’t detect backspace?
  22. Why Firefox says that window.event is undefined? (call function with added event listener)
  23. Variable in JavaScript callback functions always gets last value in loop? [duplicate]
  24. addEventListener vs onclick
  25. Code inside DOMContentLoaded event not working
  26. Javascript multiple dynamic addEventListener created in for loop – passing parameters not working
  27. reactjs event listener beforeunload added but not removed
  28. Javascript scope addEventListener and this
  29. Listen to multiple keydowns
  30. addEventListener gone after appending innerHTML

Leave a Comment