Is there an way to add an event listener to a node list?

Question

I am building a sketch and I am stuck on making the relevant div.block elements (in .gridcontainer) to change on mouseover. I can achieve this if I change the query selector to "div" instead of ".block", however this is not what I want.

Likely I need to change the logic completely. How should I achieve this?

let colours = document.querySelector(".block");

colours.addEventListener("mouseover", () => {
  event.target.style.backgroundColor = "green";
});


let newGrid = document.querySelector('button');

newGrid.addEventListener("click", event => {
  if (event.target.nodeName == "BUTTON") {
    deleteChild();
    let userInput = howMany();
    let input = userInput * userInput;
    let pixel = 500 / userInput;
    for (let i = 0; i < input; i++) {
      let i = addGrid(pixel)
    }
  }
});

function howMany() {
  let userInput = prompt("how many?");
  return userInput
}

function addGrid(pixel) {
  let container = document.querySelector(".gridcontainer");
  let grid = document.createElement('div');
  grid.classList = ('block');
  grid.textContent = 'hi';
  grid.style.height = pixel + 'px';
  grid.style.width = pixel + 'px';
  container.appendChild(grid);
}

function deleteChild() {
  let e = document.querySelector(".gridcontainer");
  let child = e.lastElementChild;
  while (child) {
    e.removeChild(child);
    child = e.lastElementChild;
  }
}

.gridcontainer {
  display: flex;
  width: 500px;
  height: 500px;
  flex-direction: row;
  gap: 0x;
  flex-wrap: wrap;
}

.block {
  display: flex;
  flex-direction: column;
  text-align: center;
  color: blue;
}

<button>Change Canvas</button>
<div class=gridcontainer>
  <div class="block" style="height: 31.25px; width: 31.25px;">hi</div>
  <div class="block" style="height: 31.25px; width: 31.25px;">hi</div>
  <div class="block" style="height: 31.25px; width: 31.25px;">hi</div>
  <div class="block" style="height: 31.25px; width: 31.25px;">hi</div>
  <div class="block" style="height: 31.25px; width: 31.25px;">hi</div>
  <div class="block" style="height: 31.25px; width: 31.25px;">hi</div>
  <div class="block" style="height: 31.25px; width: 31.25px;">hi</div>
  <div class="block" style="height: 31.25px; width: 31.25px;">hi</div>
</div>

Snippet is also available at Codepen.

A common solution for attaching event listeners to dynamically created elements is [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation). — Teemu, Sep 22 '22 at 06:03
Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Sep 22 '22 at 06:30

score 0 · Answer 1 · answered Sep 28 '22 at 19:20

You have two mistakes here. First of all you try to get the .block class elements with .querySelector(). But since you want all elements with the .block class you need to do like this

//querySelectorAll to get all elements with class .block
let colours = document.querySelectorAll(".block"); 

//Add eventlistener for the initial .block class elements from html
colours.forEach((element) => {
  element.addEventListener("mouseover", (e) => {
    event.target.style.backgroundColor = "green";
  });
})

Then when you increase the grid you need to also attach the event listener to the new grid items. You could do something like this.

function addGrid(pixel) {

  let container = document.querySelector(".gridcontainer");
  let grid = document.createElement('div');
  grid.classList = ('block');
  grid.textContent = 'hi';
  grid.style.height = pixel + 'px';
  grid.style.width = pixel + 'px';
  
  //Add eventlistener for every new grid added
  grid.addEventListener("mouseover", (e) => {
    event.target.style.backgroundColor = "green";
  });

  container.appendChild(grid);
}

Is there an way to add an event listener to a node list?

1 Answers1