How to validate and call a message only after clicking a button

Asked

Viewed 22 times

0

I created a Javascript memory game. Everything is working almost perfectly, what I wanted was that the message of "CORRECT COMBINATION" and "INCORRECT COMBINATION", appeared only after I started the game by clicking the button: 'click here to start'. What I realized is that before starting the game and if I click on the cards the message appears anyway. I would like it to appear only after I start the game even by clicking on "Click here to Start".

On the "index.html" screen it looks like this: On the button: "click here to start" <!-- ADD MENSAGEM COMBINAÇÃO CORRETA/INCORRETA --> <div class="row container-fluid"> <div id="mensagem" class="alert alert-success invisible" role="alert"> Combinação!! </div> </div>

And in "tela.js"

I made the following code:

        const MENSAGENS = {
    sucesso: {
        texto: "Combinação Correta!",
        classe: "alert-success"
    },
    erro: {
        texto: "Combinação Incorreta!",
        classe: "alert-danger"
    }
}

 static async exibirMensagem (sucesso = true) {
        
        const elemento = document.getElementById(ID_MENSAGEM)
        if(sucesso) {
            elemento.classList.remove(MENSAGENS.erro.classe)
            elemento.classList.add(MENSAGENS.sucesso.classe)
            elemento.innerText = MENSAGENS.sucesso.texto
        }
        else {
            elemento.classList.remove(MENSAGENS.sucesso.classe)
            elemento.classList.add(MENSAGENS.erro.classe)
            elemento.innerText = MENSAGENS.erro.texto
        }
        elemento.classList.remove(CLASSE_INVISIVEL)
        // A mensagem aparece durante 1 segundo e desaparece pois coloquei o async na função.
        await util.timeout(1000)
        elemento.classList.add(CLASSE_INVISIVEL)
    }

And then in gameDaMemoria.js I called displayMensage inside the function "checkCombine"

                    this.tela.exibirMensagem()
                    
                    return
                 }

                //  alert('Combinação Incorreta!')
                this.tela.exibirMensagem(false)

Anyway the functional part, the messages are ok, I just wanted you to activate the messages only after clicking the start button.

No answers

Browser other questions tagged

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