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