1
resposta

não reinicia o tempo...ajuda por favor!

<!DOCTYPE html>
<html lang="pt-br"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Alura Typer</title>
</head>
<body>
    <h1>Alura Typer</h1>
    <p class="frase">Esta frase tem belas e grandes palavras para testarmos.</p>

    <ul class="informacoes">
        <li><span id="tamanho-Frase">5</span> palavras</li>
        <li><span id="tempo-digitacao">10</span> segundos</li>
    </ul>

    <textarea class="campo-digitacao" rows="8" cols="40"></textarea>
    <button id="botao-iniciar">Reiniciar Jogo</button>
<ul>
    <li><span id="contador-caracteres">0</span> Caracteres</li>
    <li><span id="contador-palavras">0</span> Palavras</li>

</ul>

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

</body>
<htlm>
var tempoInicial = $("#tempo-digitacao").text();
var campo = $(".campo-digitacao");

$(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(" ").length;
        $("#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);
    });
}   

function reiniciaJogo(){
    campo.attr("disabled",false);
    campo.val("");
    $("#contador-palavras").text("0");
    $("#contador-caracteres").text("0");
    $("#tempo-digitacao").text(tempoInicial);
    inicializaCronometro();
}
1 resposta

Fala ai Gustavo, tudo bem? O problema está no seu HTML, vamos ver como você vincula a função de reiniciar o com o botão:

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

Repare que você está procurando um elemento na página que tenha o id igual à botao-reiniciar, mas, olhando no HTML:

<button id="botao-iniciar">Reiniciar Jogo</button>

O id do botão está definido como botao-iniciar e o JavaScript está procurando por botao-reiniciar, sendo assim, precisamos mudar o id do botão ficando:

<button id="botao-reiniciar">Reiniciar Jogo</button>

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software