无法通过JavaScript创建的div将eventListener添加到

Question

I am working on an Etch-A-Scetch project. I created grid which contains a certain amount of squares of the same size (the user is able to type in the amount of squares which should be displayed). To create the squares I used CSS grid and a Javascript for loop. Now I want to add event listeners, which change the background of each Square when moving over it. Unfortunately, it always shows errors when I try to add some. The current code doesn't show an error, it just doesn't do anything.

The method createSquares() should just create and add the amount of squares to the DOM. The user types in an amount, for example 10, and the displayed squares are 10 in x-direction and 10 in y-direction --> makes 100 squares in total. After that I want to add an event listener, which changes the background color of the square the user hovers over (the background color should stay changed). I am thankful for any help, because I'm really clueless :D

 let squareDiv = document.querySelector('.squareDiv'); let squares = document.getElementById('#squares') let squareAmount = 10; function blackColor() { this.style.backgroundColor = '#000'; this.style.border = '0px'; } function createSquares() { for (i = 0; i < squareAmount * squareAmount; i++) { squares = document.createElement('div'); squares.setAttribute("id", "squares"); // squares.setAttribute("onmouseover", "addEventListener") squares.style.display = 'grid'; squareDiv.style.setProperty('--columns-amount', squareAmount); squareDiv.style.setProperty('--rows-amount', squareAmount); squareDiv.appendChild(squares); } } createSquares(); if (squares) { squares.addEventListener('mouseover', _ => { squares.style.backgroundColor = blackColor; }); } 

 <div class="squareDiv"></div> <div id="squares"></div> 

Answer 1

You likely need something like this

I fixed the script, now fix the CSS

 let container = document.getElementById("container") let squareAmount = 5; function getRandom() { return '#'+Math.floor(Math.random()*16777215).toString(16); } function colorIt(sq) { sq.style.backgroundColor = document.getElementById("random").checked? getRandom() : '#000'; sq.style.border = '0px'; } function createSquares() { let grid = document.createElement('div'); grid.setAttribute("id","squares") grid.classList.add("grid"); for (i = 0; i < squareAmount * squareAmount; i++) { square = document.createElement('div'); square.classList.add("square"); grid.appendChild(square); } container.innerHTML=""; container.appendChild(grid) } createSquares(); container.addEventListener('mouseover', e => { const target = e.target; if (target.matches(".square")) colorIt(target) } ); 

 .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); grid-auto-rows: 1fr; } .grid::before { content: ''; width: 0; padding-bottom: 100%; grid-row: 1 / 1; grid-column: 1 / 1; } .grid > *:first-child { grid-row: 1 / 1; grid-column: 1 / 1; } /* Just to make the grid visible */ .grid > * { background: rgba(0,0,0,0.1); border: 1px white solid; } 

 <label><input type="checkbox" id="random" />Random</label> <div id="container"></div> 

Answer 2

1. You have already created the element in DOM, please remove this.
2. while creating the element using function createSquares assign class instead of ID. Since, you should have only element with one ID.
3. Move the addEventListener inside the function after you have created the element.

Answer 3

When creating similar html elements with same properties it is better to group them together with class and not id . This is good because it becomes simple to loop these html elements with forEach or other looping methods you may prefer.

 let squareDiv = document.querySelector('.squareDiv'); let squares = document.getElementById('#squares') let squareAmount = 10; function blackColor() { this.style.backgroundColor = '#000'; this.style.border = '0px'; } function createSquares() { for (i = 0; i < squareAmount * squareAmount; i++) { squares = document.createElement('div'); squares.setAttribute("class", "squares"); squares.setAttribute("style", "width: 100px; height: 100px; background: #090; margin-bottom: .3rem;"); // squares.setAttribute("onmouseover", "addEventListener") squares.style.display = 'grid'; squareDiv.style.setProperty('--columns-amount', squareAmount); squareDiv.style.setProperty('--rows-amount', squareAmount); squareDiv.appendChild(squares); } } createSquares(); if (squares) { squares.addEventListener('mouseover', _ => { squares.style.backgroundColor = blackColor; }); } 

 <div class="squareDiv"></div> <div id="squares"></div>