I am trying to change background color of a div when mouseover. I can do that by assigning class to the div and in CSS assign background color to that class. But when trying to have background change randomly a have to change the background directly and that is where I fail. Function randomColor returns correct hex string but it is not reflected by using target.style.backgroundColor = '${randomColor()}'.
The other issue is with flexbox (I should not use Grid) where I want user set amount of divs to flex within fixed dimension square container and keep square.
When using target.style.backgroundColor = '${randomColor()}' I don't see it change color of the div which is what I expected to happen.
Here is my fiddle
const container = document.querySelector('#container');function addDivStart() { for (let i=1; i<=289; i++) { const newDiv = document.createElement('div'); // newDiv.textContent = "x"; newDiv.setAttribute("class", "newDiv"); container.appendChild(newDiv); newDiv.addEventListener('mouseover', e => e.target.classList.add('my-color-class') ); }}addDivStart();function removeAllChildNodes(parent) { while (parent.firstChild) { parent.removeChild(parent.firstChild); }}let rows;function randomColor (colorHex) { colorHex = "#" + (Math.random() * 0xFFFFFF<<0).toString(16); console.log(colorHex); return colorHex;}function addDivSettings() { for (let i=1; i<=rows; i++) { const newDiv = document.createElement('div'); // newDiv.textContent = "x"; newDiv.setAttribute("class", "newDiv"); container.appendChild(newDiv); newDiv.addEventListener('mouseover', e => e.target.style.backgroundColor = '${randomColor()}'); //to have random color // newDiv.addEventListener('mouseover', e => e.target.classList.add('my-color-class') ); // to change only to red }}button = document.querySelector('button');button.addEventListener('click', () => { rows = prompt('Enter desired number of squares per side (max 100):', 17); rows = rows * rows console.log(rows); removeAllChildNodes(container) addDivSettings();})