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

Problema com o markoJS

Olá, estou com um problema e acredito que tenha relação com o markoJS. Tenho o seguinte trecho de código em um arquivo .marko

<input type="text" name="livro" id="livro" placeholder="Nome do Livro.."/>

Tive a ideia de usar um outro arquivo externo .js para validar o campo, usei então a tag script no arquivo .marko para importar esse script. Nesse arquivo .js tenho o seguinte trecho :

let campo = document.querySelector("#livro");
campo.addEventListener("input", (event) => {
    console.log(this.value);
})

Onde eu adiciono um listener para me retornar o valor corrente no input do .marko.

Porém, o valor retornado é sempre undefined. Eu já testei o mesmo cenário usando um arquivo html mesmo e tudo funcionou corretamente.

Como eu poderia resolver isso no marko? Ou não tem uma saída? Já procurei e pesquisei em outros lugar e não achei uma solução. Alguém sabe resolver isso ?

5 respostas

Boa noite, Pedro! Como vai?

Pelo código que vc mandou aqui, o seletor que vc está utilizando no document.querySelector() está incorreto! Veja que vc utilizou o seletor #campo, contudo, não há nenhum elemento HTML com o id="campo" no trecho do template MarkoJS que vc apresentou! O correto seria fazer:

<input type="text" name="livro" id="livro" placeholder="Nome do Livro.."/>
const campoLivro = document.querySelector('#livro');
campoLivro.addEventListener('input', function (evento) {
     console.log(this.value);
});

Teste esse código aí e veja se funciona! Qualquer coisa é só falar!

Espero que esteja curtindo e aproveitando ao máximo todo o conteúdo do curso!

Grande abraço e bons estudos, meu aluno!

É verdade professor. Mas foi na hora de escrever a dúvida que errei. O código original está correto. Ou seja, continuo com o problema professor. Se puder me ajudar .... Eu já terminei o curso, curti muito mesmo , uso sempre o material aqui pois trabalho com node.

solução!

Que bom que terminou o curso com satisfação, meu aluno!

Mas vamos ao seu problema pq o objetivo aqui é te tirar dessas trevas! Vc chegou a testar o código que te mandei?

Olhando novamente o seu código, tbm percebi que vc está utilizando arrow function. Só que quando vc utiliza uma arrow function como callback, o this não representa mais o elemento que disparou o evento (nesse caso, o input) e por isso o valor que vc está obtendo é undefined. Tanto é verdade, que se vc fizer apenas console.log(this), o valor que deve ser impresso no terminal é window.

Para resolver o problema vc pode utilizar uma function comum no lugar da arrow function (como fiz no código que mandei na minha primeira resposta) ou então fazer como a seguir:

const campoLivro = document.querySelector('#livro');
campoLivro.addEventListener('input', evento => {
     console.log(evento.target.value);
});

Esse problema ocorre devido ao escopo diferente das arrow functions. Para saber mais sobre esse e outros assuntos mais avançados sobre a nossa querida linguagem JavaScript eu recomendo fortemente os 3 cursos avançados do mestre Flávio aqui na Alura!

Seguem os links:

https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-1

https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-2

https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-3

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço, meu aluno!

Funcionou professor! Muito obrigado! Esse fato das arrow functions me pegou de surpresa, eu fiz o primeiro curso de es6, acreditei que o this no escopo da arrow function seria o mesmo da entidade que chamasse essa arrow function.

Mas aprendi algo novo. Valeu pelo seu tempo em me ajudar. Um grande abraço e estou a espera do curso parte 2 de node.

Por nada, Pedro! Sempre que precisar de alguma ajuda é só mandar aqui no fórum da Alura!

Sobre a parte 2 do curso, tá vindo aí! Então fica ligado pq quando menos vc esperar já será lançada e com várias novidades da plataforma Node e boas práticas de desenvolvimento!

Grande abraço e bons estudos, meu aluno!