Tenho a seguinte função, que cria blocos dinamicamente:
function criar(){
let box = document.querySelector('.box');
box.style.display = 'flex'
let element = document.createElement('div')
element.style.width = '100px';
element.style.height = '100px';
element.style.background = '#f00';
element.style.marginRight = '6px';
element.className = 'container';
element.setAttribute('onmousemove', 'getRandomColor()')
box.appendChild(element)
}
function getRandomColor(){
let letters = "0123456789ABCDEF";
let color = "#";
let container = document.querySelector('.container');
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
container.style.backgroundColor = color;
return color;
}
<button onclick="criar()">Criar Quadrado</button>
<div class="box">
</div>
A função getRandomColor()
gera cores aleatórias para o bloco criado. O problema é que isso só funciona para o primeiro bloco criado, os outros recebem o evento de mouse mas não sofrem a mudança. Tentei usar o querySelectorAll()
para selecionar mais de um elemento, mas o console retorna erro. Alguém sabe como fazer funcionar?