Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
11
respostas

Função startsWith

Olá, eu resolvi implementar a função startsWith(), porém minha borda só fica da cor vermelha. Já tentei de vários modos aqui e não consegui com que ela ficasse verde, em caso de acerto.

Como eu posso implementar essa função, de modo que apareça a cor respectiva?

O código:

function inicializaMarcadores() {
  var frase = $(".frase").text();
  campo.on("input", function() {
    var digitado = campo.val();
    var comparavel = frase.substr(0, digitado.length);

    if (frase.startsWith(digitado)) {
      campo.addClass("borda-verde");
      campo.removeClass("borda-vermelha");
    } else {
      campo.addClass("borda-vermelha");
      campo.removeClass("borda-verde");
    }
  });
}

O var "comparável" não foi inicializado, pois eu substituí o operador lógico no if pela função startsWith(), daí não sei se o erro pode estar nesse fator..

11 respostas

Fala ai Philippo, tudo bem? Olhando os códigos parecem estar certos.

Sugiro você adicionar um log para ver o valor de cada variável:

console.log(frase)
console.log(digitado)

Adicione o log antes do if e compare as duas saídas.

Espero ter ajudado.

Blz, Matheus! Obrigado pela ajuda!!

Só mais uma dúvida: o fato de o var "comparavel" não ter sido chamado por nenhum comando pode influenciar na aparição da cor?

solução!

Fala ai Philippo, olhando a parte do seu código ele não deveria influenciar não.

Espero ter ajudado.

Entendi! Obrigado mais uma vez, Matheus!

Magina, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Eu resolvi abrir a página no Mozilla e funcionou! Eu estou na aula de fadeOut() agora e esse comando também não estava funcionando no Chrome. Aí resolvi abrir no Mozilla, e ambos funcionaram. Não sei se há uma declaração do código diferente para o Chrome/Safari...

Matheus, eu consegui resolver aqui! Eu testei com o console.log(), como você recomendou, e o console.log(digitado) imprimia o que eu escrevia, sem comparar com o texto que era para ser copiado, já o console.log(comparavel) imprimia o texto exatamente como estava no HTML, ignorando o que eu escrevesse no textarea. Daí fui analisando e consegui retornar a função caso esteja certo (borda verde) ou errado (borda vermelha).

O código:

function inicializaMarcadores() {
  var frase = $(".frase").text();
  campo.on("input", function() {
    var digitado = campo.val();
    var comparavel = frase.substr(0, digitado.length);

    if (digitado.startsWith(comparavel)) {
        campo.addClass("borda-verde");
        campo.removeClass("borda-vermelha");
      } else {
        campo.addClass("borda-vermelha");
        campo.removeClass("borda-verde");
      }
  });
}

Como o var frase pega exatamente o que estava na classe .frase, comecei a trabalhar em cima dele e vi a possibilidade de trocá-lo pelo var digitado, na condição if, ao chamar a função startsWith(). Já estava me dando agonia demais haha mas deu pra resolver rs

Boa Philippo, fico feliz que tenha resolvido o problema.

Desculpa a demora, estava bem corrido as coisas por aqui.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Sem problemas, Matheus! Aqui está bastante corrido também (final do período da faculdade haha)! Mas obrigado pela atenção e predisposição em ajudar!

Abraço!

Magina, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.