1
resposta

.toggleClass() não funciona

Boa tarde. Ao ler em outro forum que a repetição do código $("#botao-reiniciar").click(reinicializar) seria o problema para o erro com o .toggleCalss(), fiquei com dúvida do motivo pelo qual isso ocorre, uma vez que ao usar o addClass() e removeClass() funcionou normalmente.

Além disso, ao retirar o código $("#botao-reiniciar").click(reinicializar) e deixá-lo apenas dentro da função que é chamada na renovação da página, não faria que ele funcionasse apenas com a renovação da página.

Estou um pouco confuso.

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

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

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 conteudoSemEspaco = conteudo.replace(/\s+/g,'') //O replace é um método do JS que substitui um "teco" de um texto (string) por outro teco. Ele recebe duas coisas, o que você quer substituir, e depois da virgula pelo que deve ser substituido.
        var contadorCaracter = conteudoSemEspaco.length;
        $("#contador-caracteres").text(contadorCaracter);
        var contadorPalavra = conteudo.split(/\S+/).length - 1; //S significa space e + significa que vai pegar um ou mais desses espaçõos
        console.log(contadorPalavra);
        $("#contador-palavras").text(contadorPalavra);     
    });
}



function inicializaCronometro() {
    var tempoRestante = $("#tempo-contagem").text();

    campo.one("focus", function() {

        var contagemRegressiva = setInterval(function(){
            tempoRestante--;
            $("#tempo-contagem").text(tempoRestante);
            $("#botao-reiniciar").attr("disabled", true);          
            if (tempoRestante < 1) {         
                campo.attr("disabled", true); //insere um atributo disabled e impede de continuar escrevendo no campo
                $("#botao-reiniciar").attr("disabled", false);
                clearInterval(contagemRegressiva); //esse método para com a execução de setInterval
                campo.toggleClass("campo-desativado");
            }
        }, 1000); //veja que o código anterior está ainda dentro da função anônimo
    });
}

//$("#botao-reiniciar").click(reinicializar);

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

Fala leopoldo, tudo bom? Não consegui entender bem sua dúvida, poderia compartilahr seu código pelo github, e me descrever em tópicos quais os fluxos que chegam no que gerou sua dúvida?