CODEWITHSUNDEEP
javascripthtmlcss
Emanuel Aguirre
Emanuel Aguirre

Reputation: 1

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

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.

Upvotes: 0

Views: 633

Answers (4)

NoLimits
NoLimits

Reputation: 59

There are several ways to do this. For example, you can add the same class to your divs inside the loop. Then you can access them via document.querySelectorAll('.class-name'). So smth like this:

[...document.querySelectorAll('.class-name')].forEach( el => {
  el.addEventListener('click', (e) => { changeColor(e); });
});

Upvotes: 0

Ashish sah
Ashish sah

Reputation: 755

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 class="holder">
      <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>

    
  </div>

Upvotes: 0

Professor Abronsius
Professor Abronsius

Reputation: 33823

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>

Upvotes: 0

Raziak
Raziak

Reputation: 388

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>

Upvotes: 2

Related Questions