How can i select a specific element in a HTMLCollection in javascript-CodePudding

I have a div container with a certain number of div's created with a for loop inside of it. When i click one of these a divs, i need to make it change the colour. My problem is can't figure out how to select an specific element with the addEventListener to change the color.

<body>
    <div id="main-container"></div>
    <script src="script.js"></script>
</body>

const mainContainer = document.getElementById("main-container");
for (let i = 0; i <= 11;   i) {
    const gridChildrens = document.createElement("div");
    gridChildrens.setAttribute("class", `gridChildrens`);
    const grids = document.querySelector('.gridChildrens')
    mainContainer.appendChild(gridChildrens);
}

For the moment, i figure out how to change the color of the firt or the last of the elements with a click listener, but not for the rest of the of the divs.

For the moment, i figure out how to change the color of the firt or the last of the elements with a click listener, but not for the rest of the of the divs. I expect to click any of the divs and change the color.

CodePudding user response：

Try to add an event listener to each div created in the loop and then use 'this' to set your colour. Here's an example :

const mainContainer = document.getElementById("main-container");
        for (let i = 0; i <= 11;   i) {
            const gridChildrens = document.createElement("div");
            gridChildrens.setAttribute("class", `gridChildrens`);
            gridChildrens.addEventListener('click', function() {
                this.style.backgroundColor = 'red';
            });
            mainContainer.appendChild(gridChildrens);
        }

Code snippet sample:

<html>
<head>
    <style>
        .gridChildrens {
            width: 50px;
            height: 50px;
            background-color: blue;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="main-container"></div>

    <script>
        const mainContainer = document.getElementById("main-container");
        for (let i = 0; i <= 11;   i) {
            const gridChildrens = document.createElement("div");
            gridChildrens.setAttribute("class", `gridChildrens`);
            gridChildrens.addEventListener('click', function() {
                this.style.backgroundColor = 'red';
            });
            mainContainer.appendChild(gridChildrens);
        }
    </script>
</body>
</html>

CodePudding user response：

To explicitly target an element the querySelector without click event (which will inspect the event.target ) you can use the nth-child or nth-of-type style css selector as below.

To identify an element based upon user click the event itself will expose the target property which will be the element that caused the event handler to fire. The following uses a delegated event listener bound to the document itself which processes all click events if required but here responds only to those bound to the gridChildrens elements

const mainContainer = document.getElementById("main-container");
for (let i = 0; i <= 11;   i) {
    const div = document.createElement("div");
    div.setAttribute("class", `gridChildrens`);
    div.textContent=i;
    

    mainContainer.appendChild( div );
}


document.querySelector('.gridChildrens:nth-of-type(4)').classList.add('banana')
document.querySelector('.gridChildrens:nth-of-type(7)').classList.add('banana')
document.querySelector('.gridChildrens:nth-of-type(10)').classList.add('banana')


document.addEventListener('click',e=>{
  if( e.target instanceof HTMLDivElement && e.target.classList.contains('gridChildrens') ){
    e.target.classList.toggle('tomato')
  }
})

.gridChildrens{
  width:50%;
  height:1rem;
  margin:0.25rem;
}

.banana{
  background:yellow
}
.tomato{
  background:tomato
}

<div id="main-container"></div>

CodePudding user response：

This should give you a good idea of how to use addEventlistner. Basically, you can pass the event object whenever you make some event. That has all the information of the specific div that you are looking for, you can change anything with that. But remember to bind the elements with addEventlistner first.

var containers= document.getElementsByClassName("container");
const changeColor = (e)=>{

  if(e.target.style.background =="orange"){
    e.target.style.background ="red"
  }
  else
  e.target.style.background ="orange";
}

for(var i=0; i< containers.length; i  ){
  containers[i].addEventListener('click',function(e){
    changeColor(e)
  } );
}

.container{
  height:50px;
  width:100px;
  background: #000;
  margin :10px 10px;
  border-radius:10px;
  cursor:pointer;
}
.holder{
  display:flex;
  flex-wrap:wrap;
  
}

  <div >
      <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>

    
  </div>