4
respostas

Função toggleClass() não esta funcionando

<main class="container">
        <h1>Alura Typer</h1>
        <p class="frase">Lorem ipsum dolor sit am  et, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <ul class="informacoes center">
            <li>
                <i class="small material-icons icones">description</i>
                <span id="tamanho-frase">5</span> palavras
            </li>
            <li>
                <i class="small material-icons icones">query_builder</i>
                <span id="tempo-digitacao">10</span> segundos
            </li>
        </ul>
        <textarea class="campo-digitacao" rows="8" cols="80"></textarea>
        <a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red" >
            <i class="material-icons">restore</i>
        </a>
        <ul class="informacoes center">
            <li><span id="contador-caracteres">0</span> caracteres</li>
            <li><span id="contador-palavras">0</span> palavras</li>
        </ul>
    </main>

<script>

function inicializaCronometro(){
    var tempoRestante = $("#tempo-digitacao").text();
    campo.one('focus', function(){
        $("#botao-reiniciar").attr("disabled", true);
        var cronometroID = setInterval(function(){
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);

            if(tempoRestante < 1){
                campo.attr("disabled", true);
                clearInterval(cronometroID);
                $("#botao-reiniciar").attr("disabled", false);
                campo.toggleClass("campo-desativado");
            };

        }, 1000);
    });
};



$("#botao-reiniciar").click(reiniciaJogo);
function reiniciaJogo(){
        campo.attr("disabled", false);
        var conteudo = campo.val("");
        $("#contador-caracteres").text("0");
        $("#contador-palavras").text("0");
        $("#tempo-digitacao").text(tempoInicial);
        inicializaCronometro();
        campo.toggleClass("campo-desativado");

}

</script>
4 respostas

Não sei se será possível ajudar apenas com esse pedaço de JavaScript. Mas faça um teste, veja se o código está chegando na linha da função toggleClass, coloque um console.log depois e teste o jogo quando o tempo terminar:

if(tempoRestante < 1){
    campo.attr("disabled", true);
    clearInterval(cronometroID);
    $("#botao-reiniciar").attr("disabled", false);
    campo.toggleClass("campo-desativado");
    console.log("Passou do toggleClass() !!"); // Abra o console e veja se essa mensagem irá aparecer
};

passou

E o campo não está mudando de cor ?

Você checou se a classe campo-desativado existe no arquivo css e se ela realmente está com esse nome e, ainda por cima, se está com a regra background-color: lightgray ?

Se estiver tudo ok, irei precisar que poste todo o seu código HTML, CSS, e JavaScript para poder analisar.

O campo toggleClass adiciona ou remove uma classe, então você tem que ver que classe é essa que está sendo alterada.

No caso campo.toggleClass("campo-desativado") adiciona a classe campo-desativado à variável campo. Que por sua vez representa a classe campo-digitacao que pertence à área de texto:

var campo = $(".campo-digitacao")

Então quando o toggleClass é ativado ele alterna o html entre:

<textarea class="campo-digitacao"> 
e
<textarea class="campo-digitacao campo-desativado">

campo-desativado é uma classe que nesse código tem como única função adicionar um estilo ao campo de texto.

Se você verificar tudo acima e estiver tudo correto então pode ser que você fez algum erro no seu arquivo estilos.css