Button background does not change when it is first clicked. (Html5, pure CSS and JS)

Asked

Viewed 119 times

1

Well, I have some buttons that represent bingo balls, and I want them to change color as soon as they are clicked, but they only change color from the second time they are clicked. I had to make a gambit to be able to function correctly the addition or removal of the drawn ball from the set of drawn balls. How to solve it so you can get rid of it?
Follows the code:

<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>

(I think the button Ids are unnecessary)

javascript html5 css3

2 answers

1

You have to take the backgroundColor using the window.getComputedStyle since this property is in a class .botaoNumeros and not the attribute style inline style='background-color:red'.

Example with style inline:

function teste(btn){
    console.log("background-color:", btn.style.backgroundColor);
}
button{ color: #FFF; }
.botao{ background-color: red; }
<button style='background-color: blue;' onclick="teste(this);">Esse funciona, style inline</button><br/>
<button class="botao" onclick="teste(this);">Esse não funciona, style por class</button>

Applying window.getComputedStyle to your code.
Note: When using the getComputedStyle instead of receiving red you will receive the color in rgb rgb(255, 0, 0):

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().

    // modificado aki
    var btnStyle = window.getComputedStyle( botao );
    bgcolor = btnStyle.backgroundColor;
    console.log( bgcolor , botao.style.backgroundColor );

    if (bgcolor === "rgb(255, 0, 0)") {
        botao.style.backgroundColor = "green";
    } else {
        botao.style.backgroundColor = "red";
    }

    // Gambiarra feita por causa do problema da cor do background.
    if (botao.style.backgroundColor === "rgb(255, 0, 0)") {
        if (bolas.indexOf(bola) > -1) {
            bolas.splice(bola, 1);
        }
    } else {
        if (bolas.indexOf(parseInt(botao.textContent)) == -1) {
            bolas.push(bola);
        }
    }
}
.botaoNumeros {
    background-color: red;
}
<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>

0


Like property .style.backgroundColor initially is empty, meaning that it is red, Just put that condition on the if:

if (botao.style.backgroundColor === "red" || !botao.style.backgroundColor) {
                                                           ↑
                                                  verifica se é vazio


// 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) {
        botao.style.backgroundColor = "green";
    } else {
        botao.style.backgroundColor = "red";
    }
}
.botaoNumeros {
    background-color: red;
}
<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>

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.