Entrar Ainda não tem acesso?
6
respostas

Os estilos das bordas não funcionam

Referente ao curso jQuery: domine a biblioteca mais popular do mercado parte 1, no capítulo Funções que auxiliam os estilos e atividade Marcação da borda

por Estudante
| 251.6k xp | 136 posts

Olá!

Não entendo o que posso ter errado, mas quando coloco apenas console.log() a lógica da borda mostra quando está certo e quando está errado:

campo.on("input", function(){
    var frase = $("#frase").text();
    var digitado = campo.val();
    var comparavel = frase.substr(0, digitado.length);
    if(digitado == comparavel) {
        console.log("esta certo");
    }else {
        console.log("esta errado");
    };
});

Porém se eu faço como o exercício pede, ela não atualiza a cor da borda:

campo.on("input", function(){
    var frase = $("#frase").text();
    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");
    };
});

O css do campo e das bordas estão assim:

#campo-digitacao {
    font-size: 20px;
    height: 130px;
    border: 3px solid black;
}

.borda-verde {
    border: 3px solid green;
};

.borda-vermelha {
    border: 3px solid red;
};

Desde que começou aparecer a seguinte mensagem no console, ele não carrega o estilo corretamente: "Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2". Outro detalhe é que, se eu retirar a borda preta, ela até vai me atualizando a borda-verde, porém, quando erro o digitado, ele apenas apaga a borda verde e não carrega a vermelha. Me parece que o navegador só está conseguindo carregar uma borda por vez.

Alguém pode me ajudar a entender esse problema?

6 respostas
por Leonardo Lima
| 265.2k xp | 89 posts

Oi, Renato

Tente colocar o seletor para o campo onde você quer fazer a alteração dessa forma:

$(' nome do id ou classe aqui').addClass("borda-vermelha");

Aparentemente também estão faltando seletores nos demais campos. Espero ter ajudado :)

por Estudante
| 251.6k xp | 136 posts

Eu tentei também e não deu certo

por Marco Bruno
| 362.1k xp | 794 posts
Desenvolvedor e Instrutor

Renato.

Como está a parte do seu código que pega o elemento campo que você está usando para adicionar e remover as classes?

por Estudante
| 251.6k xp | 136 posts

Leonardo, o html está assim:

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

e o JS está assim:

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

$(function() {
    atualizaTamanhoFrase();
    atualizaContadores();
    atualizaCronometro();
    $("#botao-reiniciar").click(reiniciaJogo);
})

function atualizaTamanhoFrase() {
    var frase = $("#frase").text().split(" ").length;
    var palavrasInicial = $("#palavras-inicial").text(frase);
};

function atualizaContadores() {
    campo.on("input", function(){
        var digitado = campo.val();
        var contadorPalavras = digitado.split(/\S+/).length - 1;
        var palavrasDigitadas = $("#palavras-digitadas").text(contadorPalavras);
        var contadorCaracteres = digitado.length;
        var caracteresDigitados = $("#caracteres-digitados").text(contadorCaracteres);
    });
};

function atualizaCronometro() {
    campo.one("focus", function(){
        var tempoDigitacao = $("#tempo-inicial").text();
        var cronometroID = setInterval(function(){
            tempoDigitacao--;
            $("#tempo-inicial").text(tempoDigitacao);    

            if(tempoDigitacao < 1){
                clearInterval(cronometroID);
                finalizaJogo();
            }
        }, 1000);
    });
};

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

function reiniciaJogo() {
    campo.attr("disabled", false);
    $("#palavras-digitadas").text("0");
    $("#caracteres-digitados").text("0");
    campo.val(" ");
    $("#tempo-inicial").text(tempoInicial);
    atualizaCronometro();
    campo.toggleClass("campo-desativado");
};

campo.on("input", function(){

    var frase = $("#frase").text();
    var digitado = campo.val();
    var comparavel = frase.substr(0, digitado.length);

    if(digitado == comparavel) {
        $("#campo-digitacao").addClass("borda-verde");
        $("#campo-digitacao").removeClass("borda-vermelha");
    }else {
        $("#campo-digitacao").addClass("borda-vermelha");
        $("#campo-digitacao").removeClass("borda-verde");
    };

});
por Estudante
| 251.6k xp | 136 posts

alguém pode me ajudar?

por Estudante
| 251.6k xp | 136 posts

alguém pode me ajudar?