Bem, eu tenho uns botões que representam bolas de bingo, e quero que eles mudem de cor assim que são clicados, mas eles só mudam de cor a partir da segunda vez que são clicados. Tive que fazer uma gambiarra pra poder funcionar corretamente a adição ou remoção da bola sorteada do conjunto de bolas sorteadas. Como resolver para poder tirar a gambiarra?
Segue o código:
<style>
.botaoNumeros {
background-color: red;
}
</style>
<body>
<button type="button" class="botaoNumeros" id="b00" onclick="selecionado(this)">00</button>
<button type="button" class="botaoNumeros" id="b01" onclick="selecionado(this)">01</button>
<button type="button" class="botaoNumeros" id="b02" onclick="selecionado(this)">02</button>
<button type="button" class="botaoNumeros" id="b03" onclick="selecionado(this)">03</button>
<button type="button" class="botaoNumeros" id="b04" onclick="selecionado(this)">04</button>
<button type="button" class="botaoNumeros" id="b05" onclick="selecionado(this)">05</button>
</body>
<script>
var bolas = [];
// TRANSFORMA O BOTÃO DE VERMELHO PRA VERDE, OU VICE-VERSA.
function selecionado(botao) {
var bola = parseInt(botao.textContent);
// Coloca o texto contido no botão (.textContent), que no caso é uma string entre 00 e 99, transformado em um inteiro pelo método parseInt().
if (botao.style.backgroundColor === "red") {
botao.style.backgroundColor = "green";
} else {
botao.style.backgroundColor = "red";
}
// Gambiarra feita por causa do problema da cor do background.
if (botao.style.backgroundColor === "red") {
if (bolas.indexOf(bola) > -1) {
bolas.splice(bola, 1);
}
} else {
if (bolas.indexOf(parseInt(botao.textContent)) == -1) {
bolas.push(bola);
}
}
}
</script>
(Creio que os IDs dos botões são desnecessários)