Oi, Luanna, tudo bem?
Desculpe a demora em te responder!
O problema que você relatou ocorre, pois a variável comparavel
está sendo definida como uma substring da variável frase
que possui o mesmo comprimento que a variável digitado
, mas isso não significa que as duas strings são iguais. A condição if(digitado == comparavel)
só será verdadeira se o usuário digitar a sequência exata de caracteres na mesma ordem que aparece na variável frase, o que é muito improvável em virtude da quebra de linha que você mencionou.
Podemos corrigir esse problema realizando algumas alterações na função inicializaMarcadores()
. Utilizamos o operador de igualdade estrita (===), que leva em consideração tanto o valor quanto o tipo das variáveis. Além disso, podemos aplicar também a propriedade trim()
para remover os espaços em branco extras que estão presentes no início e no final da string.
Dessa forma o código seria escrito da seguinte maneira:
function inicializaMarcadores() {
var frase = $(".frase").text().trim();
campo.on("input", function() {
var digitado = campo.val().trim();
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");
}
});
}
Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!