0

Boa tarde, O código abaixo gera um quadrado vermelho toda vez que clico no botão "Criar quadrado vermelho". Mas agora preciso trocar a cor desse quadrado toda vez que passo o mouse por cima dele, tentei fazer isso com o código abaixo, mas não consegui. Alguém poderia me ajudar?

Criar quadrado vermelho
<script>
    var btnElement = document.querySelector('button.botao');

    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(); // #E943F0

    btnElement.onclick = function () {
        // cria um novo elemento div
        var divNova = document.createElement("div");
        divNova.style.width = '100px';
        divNova.style.height = '100px';
        divNova.style.backgroundColor = '#f00';

        // adiciona o novo elemento criado e seu conteúdo ao DOM
        var divAtual = document.querySelector('app');
        document.body.insertBefore(divNova, divAtual);

        return divNova;
    }

    divNova.onmouseover = function () {

        var divNovaCor = document.createElement("div");
        divNovaCor.style.width = '100px';
        divNovaCor.style.height = '100px';
        divNovaCor.style.backgroundColor = newColor;

        var divNova = document.querySelector('app');
        document.body.insertBefore(divNovaCor, divNova);
    }                      
</script>

1 Resposta 1

1

Caso queira mudar sempre para a mesma cor (azul, por exemplo), eu sugeria fazê-lo com css, ou seja, definir uma classe para os quadrados que são adicionados e depois definir o css para quando passa por cima.

No onclick do btnElement, adicione divNova.classList.add('square);. Depois defina a seguinte regra em css:

.square:hover {
   background-color: blue;
}

Update

Usando apenas js:

var btnElement = document.querySelector('button.botao');

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(); // #E943F0

btnElement.onclick = function () {
    // cria um novo elemento div
    var divNova = document.createElement("div");
    divNova.style.width = '100px';
    divNova.style.height = '100px';
    divNova.style.backgroundColor = '#f00';
    divNova.onmouseover = function() {
      divNova.style.backgroundColor = getRandomColor();
    }

    // adiciona o novo elemento criado e seu conteúdo ao DOM
    var divAtual = document.querySelector('app');
    document.body.insertBefore(divNova, divAtual);
}
<button class="botao">Add Square</button>

2
  • Então, mas no caso eu preciso trocar para uma cor aleatória, gerada pela função getRandomColor(). Como eu poderia fazer isso? 17/01/2021 às 22:00
  • Neste caso terá que registar a ação ommouseover antes de adicionar o elemento à DOM. Atualizei a resposta, por favor verifique.
    – dfvc
    17/01/2021 às 22:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .