Estou tentando fazer um exercício, no qual eu preciso fazer o seguinte processo:
Utilizando o resultado do primeiro desafio, toda vez que o usuário passar o mouse por cima de algum quadrado troque sua cor para uma cor aleatória gerada pela função abaixo:
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var newColor = getRandomColor();
A solução que encontrei para o primeiro desafio citado foi a seguinte:
var btn = document.querySelector('#criarQuad');
var container = document.querySelector('#app');
btn.onclick = function() {
var quad = document.createElement('div');
quad.style.width = '100px';
quad.style.height = '100px';
quad.style.backgroundColor = '#F00';
return container.appendChild(quad);
console.log(quad);
}
Na função acima, toda vez que o usuário clicar no botão indicado, será adicionado um novo quadrado. Então tentei a seguinte solução para o exercício citado no início da publicação:
container.addEventListener('mouseover', function(e) {
e.target.className == 'quadrado' ? e.target.setAttribute('style', 'background-color: ' + newColor) : undefined;
});
Porém, ao invés de alterar a cor do quadrado como pede o exercício, ele apaga o quadrado que eu passo o mouse e todos os que vierem na sequencia, alguém saberia me dizer o por quê disso acontecer e como eu poderia solucionar?