1
Good evening friends, I created a code that every time a button is pressed it creates a div... The problem is that I need to create a mode using querySelector and onmouseover, for, whenever the mouse passes over one of these div it changes the color to another random, as I do because whenever I start the code the Divs still do not exist, as I refer them to know which one the mouse went over?
As you can see I managed to do with a change color button, but the intention is to have no button.
let btnCriar = document.querySelector('#btnCriar');
let btnRemover = document.querySelector('#btnRemover');
let btnMudarCor = document.querySelector('#btnMudarCor');
let nomes = ['Diego', 'Gabriel', 'Lucas'];
btnCriar.onclick = function createSquare() {
let squareElement = document.createElement('div')
squareElement.setAttribute('class', 'box');
squareElement.style.width = 100;
squareElement.style.height = 100;
squareElement.style.backgroundColor = 'red';
document.body.appendChild(squareElement);
}
function getRandomColor() {
let letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
btnMudarCor.onclick = function mudaCor() {
let inputElement = document.getElementsByClassName('box');
for(let i = 0; i< inputElement.length; i++){
inputElement[i].style.backgroundColor = getRandomColor();
}
}
div {
width: 30px;
height: 30px;
margin: 1rem;
}
<button class='botao' id='btnCriar'>Criar Quadrado</button>
<button class='botao' id='btnMudarCor'>Mudar Cor</button>