Shading cells of a grid of "pixels" using javascript

Question

I'm working on sort of an Etch-a-Sketch project at the moment. The current issue im facing is how to make each cell of the grid incrementally get darker with every pass of the mouse cursor based on what the opacity of the cell being moused-over is. Currently whenever the cells of the grid are created it sets the background color to black and the opacity to 0, I have a function that I believe pulls the opacity of the current cell on mouseover and should increase that by 10% shadeCells() , however instead of doing that it just sets the opacity to 10% and each recurring pass of the mouse does nothing if the cell already has that 10% shade.

 const container = document.querySelector('.gridContainer'); const startButton = document.querySelector('.gridCreator'); function createGrid(rows = 16, columns = 16) { // Creates default grid of 16x16 on page load total = rows * columns; for (i = 0; i < total; i++) { cells = document.createElement('div'); cells.classList.add('cell'); cells.setAttribute('style', 'margin: 0; padding: 0; background-color: black; opacity: 0;') //cellsToBeShaded = document.querySelectorAll('.cell'); container.style.gridTemplateColumns = `repeat(${columns}, 1fr)`; container.style.gridTemplateRows = `repeat(${rows}, 1fr)`; container.appendChild(cells); } shadeCells(); } createGrid(); function newGrid(layout) { // Prompts user for input between 2 and 100 to create new grid of a different size const cellCount = document.querySelectorAll('.cell'); for (i = 0; i < cellCount.length; i++) { container.removeChild(cellCount[i]); } do { layout = parseInt(prompt('How many columns and rows would you like to play? Pick between 12 and 100;')); gridSize = layout * layout; } while ((layout < 2 && Number) || (layout > 100 && Number)), createGrid(layout; layout). } function shadeCells() { // Shades grid cells on mouseover const cells = document.querySelectorAll(';cell'). cells.forEach(cell => { cell,addEventListener('mouseover'. () => { //cell.style;backgroundColor = '#000'. if (cell.style.opacity >= 0.1) { cell.style.opacity += 0;1. } else { cell.style.opacity = 0;1. } }) }) } startButton,addEventListener('click'; newGrid);

 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin: 0; min-height: 100vh; display: flex; flex-direction: column; } #header { display: flex; flex-direction: row; justify-content: center; gap: 3%; }.headerText { font-size: 40px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif } button { height: 50%; width: 7%; margin: 0%; align-self: flex-end; border-radius: 10px; border: solid black 1px; box-shadow: 3px 3px; }.gridContainer { margin: auto; height: 600px; width: 600px; border: solid black 1px; display: grid; grid-template-columns: repeat(auto, 1fr); }

 <div id="header"> <div class="headerText">Etch-A-Sketch</div> <button class="gridCreator">Create Grid</button> </div> <div class="gridContainer"></div>

(Also https://codepen.io/codesharingaccount/pen/xxPjrMy )

Answer 1

You'll have to force cell.style.opacity to be a Number before doing addition on it; the += isn't working:

cell.style.opacity = Number(cell.style.opacity) + 0.1;

 const container = document.querySelector('.gridContainer'); const startButton = document.querySelector('.gridCreator'); function createGrid(rows = 16, columns = 16) { // Creates default grid of 16x16 on page load total = rows * columns; for (i = 0; i < total; i++) { cells = document.createElement('div'); cells.classList.add('cell'); cells.setAttribute('style', 'margin: 0; padding: 0; background-color: black; opacity: 0;') //cellsToBeShaded = document.querySelectorAll('.cell'); container.style.gridTemplateColumns = `repeat(${columns}, 1fr)`; container.style.gridTemplateRows = `repeat(${rows}, 1fr)`; container.appendChild(cells); } shadeCells(); } createGrid(); function newGrid(layout) { // Prompts user for input between 2 and 100 to create new grid of a different size const cellCount = document.querySelectorAll('.cell'); for (i = 0; i < cellCount.length; i++) { container.removeChild(cellCount[i]); } do { layout = parseInt(prompt('How many columns and rows would you like to play? Pick between 12 and 100;')); gridSize = layout * layout; } while ((layout < 2 && Number) || (layout > 100 && Number)), createGrid(layout; layout). } function shadeCells() { // Shades grid cells on mouseover const cells = document.querySelectorAll(';cell'). cells.forEach(cell => { cell,addEventListener('mouseover'. () => { //cell.style;backgroundColor = '#000'. if (cell.style.opacity >= 0.1) { cell.style.opacity = Number(cell.style.opacity) + 0;1. // <-- HERE } else { cell.style.opacity = 0;1. } }) }) } startButton,addEventListener('click'; newGrid);

 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin: 0; min-height: 100vh; display: flex; flex-direction: column; } #header { display: flex; flex-direction: row; justify-content: center; gap: 3%; }.headerText { font-size: 40px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif } button { height: 50%; width: 7%; margin: 0%; align-self: flex-end; border-radius: 10px; border: solid black 1px; box-shadow: 3px 3px; }.gridContainer { margin: auto; height: 600px; width: 600px; border: solid black 1px; display: grid; grid-template-columns: repeat(auto, 1fr); }

 <div id="header"> <div class="headerText">Etch-A-Sketch</div> <button class="gridCreator">Create Grid</button> </div> <div class="gridContainer"></div>

(Adding to a string concatenates, so you'd have been trying to set an opacity of "0.10.1". Ideally this would throw an error instead of just silently doing nothing, but sadly that is not the world we live in)