How can I select all DIVs with querySelectorAll?

Question

I want to call all div s because TUTTIiDIV is already an array. When I run this code the console looks okay, but the code doesn't work as expected.

How can I select all the elements of the array TUTTIiDIV ?

 document.addEventListener("DOMContentLoaded", function() { var TUTTIiDIV = document.querySelectorAll("div"); document TUTTIiDIV.onclick = function() { coloraicontorni() } }); //END DOMcontentLoaded function coloraicontorni() { var TUTTIiDIV = document.querySelectorAll("div"); for (i = 0; i <= TUTTIiDIV.length; i++) { TUTTIiDIV[i].classList.add('contorno'); } };

 * { box-sizing: border-box; } body { background-color: antiquewhite; } #rosso { width: 25%; height: 150px; background-color: red; display: inline-block; } #blu { width: 25%; height: 150px; background-color: blue; display: inline-block; } #giallo { width: 25%; height: 150px; background-color: yellow; display: inline-block; }.contorno { border: 8px solid black; }

 <div id="rosso"></div> <div id="blu"></div> <div id="giallo"></div>

Answer 1

You can do it like this, I've adjusted your function.

Run the snippet below:

 var TUTTIiDIV = document.querySelectorAll("div"); for (let i = 0; i < TUTTIiDIV.length; i++) { //addEventListener "click" for each div that you are looping through with querySelectorAll TUTTIiDIV[i].addEventListener("click", function() { TUTTIiDIV[i].classList.toggle("contorno"); }); }

 * { box-sizing: border-box; } body { background-color: antiquewhite; } #rosso { width: 25%; height: 150px; background-color: red; display: inline-block; } #blu { width: 25%; height: 150px; background-color: blue; display: inline-block; } #giallo { width: 25%; height: 150px; background-color: yellow; display: inline-block; }.contorno { border: 8px solid black; }

 <div id="rosso"> </div> <div id="blu"> </div> <div id="giallo"> </div>

Answer 2

This works for me. Give me feedback if u too. ;)

Edit after Scott Marcus comment.

const tuttiDiv = document.querySelectorAll('div');
document.addEventListener("click", (event) => {
  if(event.target.nodeName === "DIV"){
    tuttiDiv.forEach((div) => {
      div.classList.toggle("contorno");
    });
  }
});

Answer 3

As you correctly point out TUTTIiDIV is a collection and so it won't have an onclick property to set, however your coloraicontorni function correctly loops over each item in the collection and modifies its classList .

But, better yet, use event delegation to more simply solve this.

Also, you should only have your <script> referenced once and that should be just before the closing body tag so that by the time the script is processed, all the HTML will have been parsed. This removes the need for the DOMContentLoaded event handler.

See comments below:

 // If your <script> is located just before the closing body tag, // then it is not necessary to set up the DOMContentLoaded event //document.addEventListener("DOMContentLoaded", function(){ // Instead of setting up an event handler on each <DIV>, just // set up a single event handler on the document and when the // click events bubble up to it, check event.target to see // which element actually triggered the event. This is called // "event delegation". let divs = document.querySelectorAll("div"); document.addEventListener("click", function(event){ // Check to see if it was a <div> that triggered the event if(event.target.nodeName === "DIV"){ // Loop over all the <div> elements in the collection divs.forEach(function(div){ div.classList.add("contorno"); // Add the class }); } });

 * { box-sizing: border-box; } body { background-color: antiquewhite; } #rosso { width: 25%; height: 150px; background-color: red; display: inline-block; } #blu { width: 25%; height: 150px; background-color: blue; display: inline-block; } #giallo { width: 25%; height: 150px; background-color: yellow; display: inline-block; }.contorno { border: 8px solid black; }

 <div id="rosso"></div> <div id="blu"></div> <div id="giallo"></div>

Answer 4

Use delegation from the closest container to choose a click on anything in that container

 window.addEventListener("load", function() { // when the page has loaded document.getElementById("container").addEventListener("click", function(e) { [...this.querySelectorAll("div")] // the "this" is the container.forEach(div => div.classList.add('contorno')); }); });

 * { box-sizing: border-box; } body { background-color: antiquewhite; } #rosso { width: 25%; height: 150px; background-color: red; display: inline-block; } #blu { width: 25%; height: 150px; background-color: blue; display: inline-block; } #giallo { width: 25%; height: 150px; background-color: yellow; display: inline-block; }.contorno { border: 8px solid black; }

 <div id="container"> <div id="rosso"></div> <div id="blu"></div> <div id="giallo"></div> </div>

If you ONLY want to click the divs, do this

 window.addEventListener("load", function() { // when the page has loaded document.getElementById("container").addEventListener("click", function(e) { if (e.target.tagName === "DIV") { // only if we click a div in the container [...this.querySelectorAll("div")] // the "this" is the container.forEach(div => div.classList.add('contorno')); } }); });

 * { box-sizing: border-box; } body { background-color: antiquewhite; } #rosso { width: 25%; height: 150px; background-color: red; display: inline-block; } #blu { width: 25%; height: 150px; background-color: blue; display: inline-block; } #giallo { width: 25%; height: 150px; background-color: yellow; display: inline-block; }.contorno { border: 8px solid black; }

 <div id="container"> <div id="rosso"></div> <div id="blu"></div> <div id="giallo"></div> </div>

Answer 5

 let divs = [...document.getElementsByTagName('div')]; divs.forEach(div => { div.addEventListener('click',function(){ div.classList.toggle('border'); }) });

 div{ width: 100px; height: 100px; margin: 10px; display: inline-block; box-sizing: border-box; cursor: pointer; }.border{ border: 10px solid black; }

 <div class='d' style="background: red;"></div> <div class='d' style="background: green;"></div> <div class='d' style="background: blue"></div>