Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Pq escrever duas vezes $("#botao-reiniciar").click(reiniciaJogo);

Já vou adiantando que estou começando a aprender jQuery.

Não entendo pq o trecho

$("#botao-reiniciar").click(reiniciaJogo);

aparece duas vezes. Uma seria dentro da função principal do jQuery e outra vez fora da função principal do jQuery.

Testei removendo o trecho que aparece fora da função principal e vi que há uma diferença no funcionamento do cronometro, mas não entendo o pq.

3 respostas

Iago, procurei nos documento do curso o codigo mostrando as duas declarações e nao encontrei ele, poderias postar como esta seu codigo aqui?

Fiz um comentário na linha. Queria saber uma explicação

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

$(function(){
    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    $("#botao-reiniciar").click(reiniciaJogo);
});


function atualizaTamanhoFrase() {

    var frase = $(".frase").text();
    var numPalavras  = frase.split(" ").length;
    var tamanhoFrase = $("#tamanho-frase");
    tamanhoFrase.text(numPalavras);
}

function inicializaContadores() {

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

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

        var qtdCaracteres = conteudo.length;
        $("#contador-caracteres").text(qtdCaracteres);

    });
}

function inicializaCronometro() {

    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus", function() {
        var cronometroID = setInterval(function() {
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);
            if (tempoRestante < 1) {
                campo.attr("disabled", true);
                clearInterval(cronometroID);
            }
        }, 1000);
    });
}

// Essa linha aqui
$("#botao-reiniciar").click(reiniciaJogo);

function reiniciaJogo(){
    campo.attr("disabled", false);
    campo.val("");
    $("#contador-palavras").text("0");
    $("#contador-caracteres").text("0");

    $("#tempo-digitacao").text(tempoInicial);
    inicializaCronometro();
}
solução!

Iago, essa linha fora da função de inicialização abstraída pelo jQuery $(function), não precisaria existir, inclusive ela pode vir a causa algum erro.

Quando utilizados o $(function) com jQuery, essa função so sera chamada quando o Browser terminar de carregar o site, assim todos os elementos já vão existir, assim será possivel registrar eventos a eles. Quando jogamos esse registro no corpo no javascript ele é executado assim que o script é carregado, podendo ter ou não carregado os elementos do HTML, assim podendo não associar o evento como deveria.