Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Minha função não funciona automaticamente

function conferePalavras() {
    var paragrafo = $(".texto").text()
    areaTexto.on("input", function () {
        if(paragrafo.startsWith(this.value)){
            areaTexto.addClass("acerto")
            areaTexto.removeClass("erro")
            console.log("Acertou")
        } else {
            areaTexto.removeClass("acerto")
            areaTexto.addClass("erro")
            console.log("Errou")
        }
    })
}

A função acima funciona, mas ela só muda a cor da borda no final da contagem, enquanto que no console a verificação de erro e acerto está sendo feita em tempo real. Por que isso está acontecendo?

3 respostas

Bem, pelo que parece é uma incompatibilidade do navegador. Estava desenvolvendo usando o Edge Chromium, mas ao abrir no Google Chrome funcionou perfeitamente.

Fala ai Leônidas, tudo bem? Realmente, é bem estranho, mas navegadores como Edge e Internet Explorer geralmente dão algumas dores de cabeça mesmo.

Muitas vezes é necessário adicionar polyfills para aumentar o suporte e compatibilidade com esses navegadores (além de outras técnicas).

Normalmente os navegadores mais utilizados e que eu comendo são Chrome e Firefox.

Fora esses eu não costumo usar, apenas em casos onde projetos que estou trabalhando precisem dar suporte aos mesmos.

Espero ter ajudado.

solução!

Caso queira tentar solucionar esse problema você pode colocar a função no padrão de auto execução do Jquey

$(function conferePalavras() {
    var paragrafo = $(".texto").text()
    areaTexto.on("input", function () {
        if(paragrafo.startsWith(this.value)){
            areaTexto.addClass("acerto")
            areaTexto.removeClass("erro")
            console.log("Acertou")
        } else {
            areaTexto.removeClass("acerto")
            areaTexto.addClass("erro")
            console.log("Errou")
        }
    })
});