Change color using querySelector and onmouseover

Asked

Viewed 128 times

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>

javascript

1 answer

2


You can create the event onmouseover once you create the div:

squareElement.onmouseover = function() {
  this.style.backgroundColor = getRandomColor();
}


let btnCriar = document.querySelector('#btnCriar');
let btnMudarCor = document.querySelector('#btnMudarCor');

btnCriar.onclick = function createSquare() {
    let squareElement = document.createElement('div');
  
    squareElement.setAttribute('class', 'box');
    squareElement.style.width = "30px";
    squareElement.style.height = "30px";
    squareElement.style.backgroundColor = 'red';

    squareElement.onmouseover = function() {
      this.style.backgroundColor = getRandomColor();
    }

    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>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.