Change color of div by hovering over

Question

Good afternoon, The code below generates a red square every time I click on the "Create Red Square" button. But now I need to change the color of that square every time I hover over it, I tried to do it with the code below, but I couldn’t. Could someone help me?

Create red square

<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>

Answer 1

If you want to always change to the same color (blue, for example), I would suggest doing it with css, that is, set a class for the squares that are added and then set the css for when you go over.

In the onclick of btnElement, add divNova.classList.add('square);. Then set the following rule in css:

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

Update

Using only 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>