How can I add color on clicking specific elements that were generated by JS

Question

I'm creating a pixel art maker with HTML, CSS, and vanilla JS. I've created my UI for the most part, but I can't get the functionality working. I've tried:

let cell = document.body.querySelectorAll('.grid-square');
cell.addEventListener('click', function() {
    cell.style.backgroundColor = 'red';
});

But my page 'addEventListener' isn't a function. How do I get my JS to load after the HTML so I can get this to work?

https://jsfiddle.net/wygtshu6/1/

user_12578260 · Answer

let cells = document.body.querySelectorAll('.grid-square'); // querySelectorAll return all elements which have grid-square class.

for(let i = 0; i < cells.length; i++){
        cells[i].addEventListener('click', function(){
            cells[i].style.backgroundColor = "red";
    });
}

user_514878 · Answer

There are just 2 steps you need to get this working:

querySelectorAll returns an array of elements so you need to loop through them to add the listener to each cell:

function setUpCellListeners(){
    let cells = document.querySelectorAll('.grid-square');
    cells.forEach((cell) => {
        cell.addEventListener('click', function() {
            cell.style.backgroundColor = 'red';
        });
   });
}

You need to do this after the cells have been created. They are created in the createGrid function, so we can do that by calling it at the end of that function:

//function to build the grid based on user input
function createGrid(height = 25, width = 25) {

    /* code to set up grid.... */

    // NOW we can set up our listeners because our grid is created
    setUpCellListeners();
}

Working Example:

let canvas = document.querySelector('.canvas');
let button = document.querySelector('button');
let high;
let wide;
let color = document.querySelector('.colorChoice').value;


function setUpCellListeners(){
    let cells = document.querySelectorAll('.grid-square');
    cells.forEach((cell) => {
       cell.addEventListener('click', function() {
           cell.style.backgroundColor = 'red';
       });
    });
}


//function to build the grid based on user input
function createGrid(height = 25, width = 25) {
    canvas.innerHTML = '';
    for (let i = 0; i < height; i++) {
        let row = document.createElement('div');
        row.classList.add('row');
        canvas.appendChild(row);
        for (let j = 0; j < width; j++) {
            let cell = document.createElement('div');
            cell.classList.add('grid-square');
            row.appendChild(cell);
        }
    }
    setUpCellListeners();
}

//listens for input of rows and columns
button.addEventListener('click', function() {
    high = parseInt(document.querySelector('.column-input').value);
    wide = parseInt(document.querySelector('.row-input').value);
    if (Number.isNaN(high) || Number.isNaN(wide)) {
        createGrid();
    } else {
        createGrid(wide, high);
    }
});
//Default grid built on load
window.onload = createGrid(25, 25);

.grid-square {
    height: 12px;
    width: 12px;
    border: 1px black solid;
}

.row {
    display: flex;
    justify-content: center;
}

.canvas {
    max-height: inherit;
    max-width: 75%;
}

   
    
    
    
    
        Pixel Art Maker
    

    
    
      
      
        
      

      
        
          
            Rows
            
          
          
            Columns
            
          
          
        
        
          
        
      
        
          Color

Working code in a jsfiddle: https://jsfiddle.net/has024gr/

How can I add color on clicking specific elements that were generated by JS

2 Answers