Speak Devs, I'm with the js code below briefly the idea is that when the user clicks the button creates a new screen element in the form of a square, every time the user moves the mouse over the square change his color for a random color generated by the function, but it is not switching to the random colors. Can anyone help?
var btnElement = document.querySelector('button.btn');
var boxElement = document.querySelector('.box');
btnElement.onclick = function() {
boxElement.style.width = '100px';
boxElement.style.height = '100px';
boxElement.style.marginTop = '50px';
boxElement.style.backgroundColor = '#f00';
}
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
console.log(newColor);
<div class="container">
<div id="app">
<button type="button" class="btn btn-success">Success</button>
<div class="box" id="box" onmouseover="getRandomColor()"></div>
</div>
</div>