Olá, amigo!
Estou com uma dúvida. Criei uma programa que muda a cor de uma div quando o usuário clica em um botão. A função que o botão chama ao ser clicado está descrita abaixo.
var clickNumber = 0;
var colorPallete = ["red", "yellow", "orange", "purple"];
function changeColor(){
document.getElementById("square").style.backgroundColor =
colorPallete[clickNumber];
if (clickNumber >= 3) {
clickNumber = 0;
} else {
clickNumber++;
}
}Agora minha dúvida é:
Como eu posso atribuir o id para uma variável? Eu tentei fazer o seguinte:
var box = document.getElementById("square");E depois dentro da minha função escrevi:
function changeColor(){
box.style.backgroundColor = colorPallete[clickNumber];
if (clickNumber >= 3) {
clickNumber = 0;
} else {
clickNumber++;
}
}Porém dessa maneira não funciona. O que devo estar errando?
Vou deixar o HTML aqui também, mas acredito que o problema se encontre com sintaxe do J.S.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SquareChangeColor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="square"></div>
<button onclick="changeColor()">Change color</button>
<script src="script.js"></script>
</body>
</html>
