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.