Problema no Placar | jQuery: domine a biblioteca mais popular do mercado parte 1

Solucionado (ver solução)

Solucionado
(ver solução)

4
respostas

por Alexander Bassani Amaral

| 169.3k xp | 96 posts

Eng. de Computação

toda vez que eu inicio o jogo pela primeira vez, ao termino do mesmo, ele duplica o o primeiro resultado.

Não sei ao certo o que está de errado, se alguém puder olhar o código

main.js

var campo = $(".campo-digitacao");
var tempoInicial = $("#tempo-digitacao").text();

$(document).ready(function() {
    atualizaFrase();
    cronometro();
    contadores();
    reinicia();
    $("#botao-reiniciar").click(reinicia);
    correcao();
})

function atualizaFrase() {
    var frase = $(".frase").text(); 
    var numPalavras = frase.split(/\S+/).length - 1; da marcação
    var tamanhoFrase = $("#tamanho-frase");
    tamanhoFrase.text(numPalavras);
}

//---------------------- campo de digitação

function contadores() {
    campo.on("input",function(){
        var conteudo = campo.val();

        var qtdPalavras = conteudo.split(/\S+/).length - 1;
        $("#contador-palavras").text(qtdPalavras);

        var qtdCaracteres = conteudo.replace(/ /g,'');
        var length = qtdCaracteres.length;
        $("#contador-caracteres").text(length);
    });
}

//--------------------- contagem
function cronometro() {
    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus",function(){
        $("#botao-reiniciar").attr("disabled",true);
        var intervalId = setInterval(function(){
            tempoRestante --;
            console.log(tempoRestante);
            $("#tempo-digitacao").text(tempoRestante);
            if(tempoRestante == 0){
                clearInterval(intervalId);
                finalizaJogo();
            }
        },1000);
    });
}

function finalizaJogo(){
    campo.attr("disabled",true); 
    $("#botao-reiniciar").attr("disabled",false);
    //campo.css("background-color","lightgrey");
    campo.addClass("campo-desabilitado");
    placar();
}
//--------------------------------- botão reiniciar

//$("#botao-reiniciar").on("click",function(){
//
//});
function reinicia() {
    campo.attr("disabled",false);
    campo.val("");//zera o campo
    $("#contador-caracteres").text(0);
    $("#contador-palavras").text(0);
    $("#tempo-digitacao").text(0);
    $("#tempo-digitacao").text(tempoInicial);
    //campo.css("background-color","white");
    campo.removeClass("campo-desabilitado");
    campo.removeClass("campo-errado");
    campo.removeClass("campo-correto");
    cronometro();
}
//------------------------------ correção

function correcao(){
    var frase = $(".frase").text();
    campo.on("input",function(){
        var digitado = campo.val();
        var comparavel = frase.substr(0 , digitado.length);

        if(digitado == comparavel) {
            campo.addClass("campo-correto");
            campo.removeClass("campo-errado");
        } else {
            campo.addClass("campo-errado")
            campo.removeClass("campo-correto");
        }
    });
}

//-----------------------placar

function placar() { 
    var corpoTabela = $(".placar").find("tbody");
    var numPalavras = $("#contador-palavras").text();
    var usuario = "Alex";
    var botaoRemover = "<a><i class='small material-icons icones'>delete</i></a>"

    var linha = 
    "<tr>" +
        "<td>" + usuario + "</td>" +
        "<td>" + numPalavras + " Palavra(s) </td>" +
        "<td>" + botaoRemover + "</td>" +
    "</tr>";
    corpoTabela.prepend(linha); 
}

4 respostas

por Alexander Bassani Amaral

| 169.3k xp | 96 posts

Eng. de Computação

12/01/2018

não deu pra colocar o código todo, segue o resto principal.html

<!DOCTYPE html>

<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Alura Typer</title>
    <link rel="stylesheet" href="css/libs/materialize.min.css">
    <link rel="stylesheet" href="css/libs/google-fonts.css">
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>

    <div class="container">

        <h1 class="center">Alura Typer</h1>
        <p class="frase center">essa frase tem cinco palavras</p>

        <ul class="informacoes center">
            <li>

                <span id="tamanho-frase">30</span> palavras
            </li>
            <li>
                <i class="small material-icons icones">query_builder</i>
                <span id="tempo-digitacao">5</span> segundos
            </li>
        </ul>

        <textarea class="campo-digitacao center" name="" id="" cols="30" rows="10"></textarea>

        <div class="botoes">
            <button id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red">
                <i class="material-icons">restore</i>
            </button>
        </div>

        <ul class="informacoes center">
            <li><span id="contador-caracteres">0</span> caracteres</li>
            <li><span id="contador-palavras">0</span> palavras</li>
        </ul>

        <section class="placar">
            <h3 class="center">Placar</h3>
            <table class="centered bordered">
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Número de palavra(s)</th>
                        <th>Remover</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </section>

    </div>

    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>

</body>
</html>

por Marco Bruno

| 362.1k xp | 794 posts

Desenvolvedor e Instrutor

15/01/2018

Olá , Alexander.

Olhando pro seu código não achei nenhum erro. No console do browser está aparecendo algum erro?

solução!

por Alexander Bassani Amaral

| 169.3k xp | 96 posts

Eng. de Computação

17/01/2018

não, funciona normalmente, mais percebi que esse evento está acontecendo em outros códigos também, deve ser algum problema com o browser não sei ao certo

por Renê Fernandes

| 128.8k xp | 10 posts

Escrevente Téc. Judiciário

09/02/2018

Olá, Alexander!

O problema está nas funções cronometro() e reinicia().

Suas funções estão encadeadas mais ou menos assim:

=> reinicia() invoca cronometro():

function reinicia() {
    campo.attr("disabled", false);
    // resto do código aqui
    campo.removeClass("campo-correto");
    cronometro(); <---------------------- AQUI
}

=> cronômetro() invoca finalizaJogo():

function cronometro() {
    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus", function() {
        $("#botao-reiniciar").attr("disabled", true);
        var intervalId = setInterval(function() {
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);
            if (tempoRestante < 1) {
                clearInterval(intervalId);
                finalizaJogo(); //<---------------------- AQUI
            }
        }, 1000);
    });
}

=> finalizaJogo() invoca placar():

function finalizaJogo() {
    campo.attr("disabled", true);
    $("#botao-reiniciar").attr("disabled", false);
    //campo.css("background-color","lightgrey");
    campo.addClass("campo-desabilitado");
    placar(); <---------------------- AQUI
}

=> placar() insere a nova linha na tabela:

function placar() {
    var corpoTabela = $(".placar").find("tbody");
    var numPalavras = $("#contador-palavras").text();
    var usuario = "Alex";
    var botaoRemover = "<a><i class='small material-icons icones'>delete</i></a>"
    var linha = "<tr>" ... "</tr>";
    corpoTabela.prepend(linha);  <---------------------- AQUI
}

Como tanto cronometro() quanto reinicia() estão sendo chamadas logo após o carregamento da página (no $(document).ready()), o script acaba inserindo duas vezes a mesma linha na primeira jogada:

$(document).ready(function() {
    atualizaFrase();
    cronometro();  <---------------------- AQUI
    contadores();
    reinicia(); <---------------------- AQUI
    $("#botao-reiniciar").click(reinicia);
    correcao();
});

Acho que tudo deve funcionar se vc excluir essa chamada à função cronometro() na última linha de reinicia().