1
The following code is able to perform the following task:
- By clicking the "Create Square" button, a red square is rendered on the screen at each click.
I wish that, when passing the mouse over these generated squares, these change color.
Follows the code :
<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>
The function either will be responsible for generating the color changes is as follows :
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();
How can I solve such a problem?
You and you must associate the color change function to the onfocus event.
– anonimo
But the color change is permanent or should take effect only while the user has the mouse over the square ?
– Isac