O código a seguir é capaz de realizar a seguinte tarefa:
- Ao clicar no botão "Criar Quadrado", um quadrado vermelho é renderizado na tela em cada clique.
Desejo que, ao passar o mouse por cima destes quadrados gerados, estes troquem de cor.
Segue o código :
<html>
<head>
<meta charset="UFT-8" />
<title></title>
</head>
<body>
<div id="container"></div>
<button type="button" onclick="criarQuadrado()">Criar quadrado</button>
<script>
function criarQuadrado() {
var boxElement = document.createElement("div");
boxElement.style.width = 300;
boxElement.style.height = 300;
boxElement.style.display = "inline-block";
boxElement.style.backgroundColor = "#f00";
var container = document.getElementById("container");
container.appendChild(boxElement);
}
</script>
</body>
</html>
A função quer será responsável por gerar as mudanças de cores é a seguinte :
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();
Como posso resolver tal problema?