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

O tamanho da minha frase não atualiza!

main.js

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


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

function atualizaTempoInicial(tempo) {
    $("#tempo-digitacao").text(tempo);
}

function atualizaTamanhoFrase() {
    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;
        var qtdCaracteres = conteudo.length;
        $("#contador-palavras").text(qtdPalavras);
        $("#contador-caracteres").text(qtdCaracteres);
    });
}

function inicializaCronometro() {
    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus", function (){
        var cronometoID = setInterval(function(){
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);
            if (tempoRestante < 1) {
                clearInterval(cronometoID);
                finalizaJogo();
            }
        },1000);   
    })
}

function finalizaJogo(){
    campo.attr("disabled", true);
    campo.toggleClass("campo-desativado");
    inserePlacar();
}

function inicializaMarcadores(){
    campo.on("input", function () {
        var digitado = campo.val();
        var comparavel = frase.substr(0,digitado.length);
        if (digitado == comparavel) {
            campo.addClass("borda-verde");
            campo.removeClass("borda-vermelha");
        }else{
            campo.addClass("borda-vermelha");
            campo.removeClass("borda-verde");
        }
    });

}

function reiniciaJogo() {
    campo.attr("disabled", false);
    campo.val("");
    $("#contador-palavras").text("0");
    $("#contador-caracteres").text("0");
    $("#tempo-digitacao").text(tempoInicial);
    inicializaCronometro();
    campo.removeClass("campo-desativado");
    campo.removeClass("borda-verde");
    campo.removeClass("borda-vermelha");
}

frases.js

$("#botao-frase").click(fraseAleatoria);

function fraseAleatoria() {
    $.get("http://localhost:3000/frases", trocaFraseAleatoria);
}

function trocaFraseAleatoria(data) {
    var frase = $(".frase");
    var numeroAleatorio = Math.floor(Math.random() * data.length);

    frase.text(data[numeroAleatorio].texto);
    atualizaTamanhoFrase();   
    atualizaTempoInicial(data[numeroAleatorio].tempo);


    stop();
}

Eu não sei porque o tamanho das minhas frases não atualizam, mas se eu mudar a frase principal no html o código funciona!

3 respostas
solução!

Oi, Allan, tudo bem?

Obeservei a sua fiunção atualizaTamanhoFrase(), e você está chamando uma variável frase que não foi apontada. Talvez esteja faltando:

var frase = $(".frase").text();

Ficando assim:

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

Testa novamente e me fala se deu certo!

Lais, deu certo! Obrigado!

Será que tem como tirar mais uma dúvida?! No inicio do main.js tem o comando

var frase = $(".frase").text();

Porque não funciona? Porque só funciona dentro da função!?

Oi, Allan, tudo bem?

Isso é um assunto chamado Escopo de função.

Variáveis que foram definidas dentro de uma função não podem ser acessadas fora dela, exemplo:

function escopoDeVariavel (){
    let a = "escopo local";

    console.log(a)
}
escopoDeVariavel(); // escopo local
console.log(a) // undefined

O mesmo exemplo com as variáveis definidas no escopo global:

let a = "escopo global";
function escopoDeVariavel (){

    console.log(a)
}
escopoDeVariavel(); // "escopo global"
console.log(a) // "escopo global"

No caso acima, toda e qualquer função definida num escopo global pode acessar variáveis definidas no escopo global. Como outras funções irão acessar as variáveis campo, tempoInicial e frase, é interessante deixar elas declaradas no escopo global para que não precise declarar em cada função que for ser utilizada, já que elas irão ser usadas mais de uma vez.

Você pode testar esses exemplos no console do navegador.

Qualquer dúvida é só falar!

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