Html Question posted in
Some basic documentation can be found here.

Html – Trying to change the background color of a grid element on click event

I cant seem to figure out the syntax to get an element in my grid to change colors on a click event. Ive tried a few different iterations of this, and cant seem to figure out what im doing wrong. Pretty new to javscript so go easy on me if its a very obvious answer.

JS

    const gridContainer = document.getElementById('container');

    function makeGrid(rows, cols) {
      gridContainer.style.setProperty('--grid-rows', rows);
      gridContainer.style.setProperty('--grid-cols', cols);

      for (i = 0; i < rows * cols; i++) {
        let cell = document.createElement('div');
        gridContainer.appendChild(cell).className = 'grid-item';
      }
    }
    makeGrid(16, 16);

    const gridElement = document.getElementById('grid-item');
    gridElement.addEventListener('click', () => {
        gridElement.target.style.backgroundColor = 'white';
    })

css

:root {
    --grid-cols: 1;
    --grid-rows: 1;
}

#container{
    display: grid;
    grid-gap: 0em;
    grid-template-rows: repeat(var(--grid-rows), 1fr);
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    background-color: black;
}

.grid-item{
    padding: 1em;
    border: 1px solid #131313;
    text-align: center;
}

.grid-item:hover{
    background-color: #ddd;
}

const gridContainer = document.getElementById('container');

function makeGrid(rows, cols) {
  gridContainer.style.setProperty('--grid-rows', rows);
  gridContainer.style.setProperty('--grid-cols', cols);

  for (i = 0; i < rows * cols; i++) {
    let cell = document.createElement('div');
    gridContainer.appendChild(cell).className = 'grid-item';
  }
}
makeGrid(16, 16);

const gridElement = document.getElementById('grid-item');
gridElement.addEventListener('click', () => {
  gridElement.target.style.backgroundColor = 'white';
})
:root {
  --grid-cols: 1;
  --grid-rows: 1;
}

#container {
  display: grid;
  grid-gap: 0em;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  background-color: black;
}

.grid-item {
  padding: 1em;
  border: 1px solid #131313;
  text-align: center;
}

.grid-item:hover {
  background-color: #ddd;
}
<div id="container"></div>

I tried to make a separate function to target the grid element and on clicking the element the color would change but it doesnt seem to click.

Tags:

2

Answers


  1. 0

    First, grid-item is not an element id to query with getElementById, but is class, you can use getElementsByClassName or querySelectorAll.

    I prefer the querySelectorAll as it could be used for any selector, but keep in mind that it return a NodeList, which you need to iterate over to apply the click event in each item.

        const gridElements = document.querySelectorAll('.grid-item');

    gridElements.forEach(gridElement => {
      gridElement.addEventListener('click', () => {
        gridElement.style.backgroundColor = 'white';
      })
    })
    Login or Signup to reply.
  2. 0

    You have 256 elements that have the class grid-item but you are getting them by id.
    Try this document.querySelectorAll('.grid-item').forEach(el => el.addEventListener('click', () => el.style.backgroundColor = 'white'));

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search