Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Contador gerando NaN.

Referente ao curso jQuery: domine a biblioteca mais popular do mercado parte 1

por Giovani Carvalho P. Pires
| 330.6k xp | 18 posts
Product Owner / Team Leader / QA & Dev Front-end

Estou realizando a aula 3 do curso de JQuery, ondem criamos um jogo chamado Alura Typer.

Apesar dos códigos estarem idênticos ao do instrutor o meu gera mensagem de NaN ao invés de realizar corretamente a contagem.

/meu código/

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);
});

/conclusão/

Esta claro para mim que não esta acontecendo a conversão da string para o number. Porem nos códigos do instrutor não tem nenhum tipo de função para isso e funciona corretamente.

Como posso proceder?

5 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Giovani, beleza? Consegue postar o código JavaScript e HTML completos? Eu testei seu código aqui e deu tudo certo.

Fico no aguardo.

por Giovani Carvalho P. Pires
| 330.6k xp | 18 posts
Product Owner / Team Leader / QA & Dev Front-end

Boa tarde Matheus! Tudo ótimo e você?

Vou postar os códigos aqui abaixo.

/* HTML */

<!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 seis belas palavras.</p>

    <ul class="informacoes">
      <li><span id="tamanho-frase">5</span> palavras.</li>
      <li><span id="tempo-digitacao">5</spam> segundos.</li>
    </ul>

    <textarea class="campo-digitacao" rows="8" cols ="40"></textarea>

<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>
</html>

/* JS */

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

var campo = $(".campo-digitacao");
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);
});

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);
});

/* Obrigado pela ajuda */

solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Giovani, seu problema está no fechando da tag do segundo span, você está fechando com m onde deveria ser n.

Apenas um errinho de digitação.

Espero ter ajudado.

por Giovani Carvalho P. Pires
| 330.6k xp | 18 posts
Product Owner / Team Leader / QA & Dev Front-end

Muito obrigado Matheus!

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

De nada, precisando não deixe de criar suas dúvidas.