Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Uncaught TypeError: Cannot read property 'querySelector' of undefined

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Remoção, Delegação e Animação e atividade Removendo pacientes

por Ricardo Mellegari de Oliveira
| 173.9k xp | 84 posts
Analista de Projetos e Melhoria Contínua

Pessoal, boa tarde!

Estou tentando fazer uma todo list simples para praticar algumas funções e métodos, entre elas addEventlistener mas nao consigo entender o por quê de dar erro.

Segue o html 

<!DOCTYPE html>
<html lang="pt">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Praticando JS</title>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
         <link href="/todo/css/reset.css" rel="stylesheet">
         <link href="/todo/css/estilo.css" rel="stylesheet">
    <body>
        <div>
            <form class="entrada">
                <label>Tarefa</label>
                <input type="text">
                <button class='add'>Adicionar</button>
                <button>Apagar tudo</button>
            </form>

         </div>
         <div class="lista">
            <ul>
                <li class="exemplo">
                    teste
                </li>
            </ul>
         </div>
         <script src="/todo/js/addTask.js">
         </script>
    </body>
</html>

JS

var teste;
teste.querySelector('exemplo');
teste.addEventListener("click", clicado());





function clicado(){

    console.log('clicado');
}
5 respostas
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Ricardo, tudo bem?

O problema está que faltou você pedir a informação do seu seletor ao dom, ou seja, faltou a propriedade document: 

var teste = document.querySelector('exemplo');
var button = document.querySelector('.add');
button.addEventListener("click", clicado());

function clicado(){

    console.log('clicado');
}

O mesmo para o addEventListener.

Testa e me fala se deu certo!

por Ricardo Mellegari de Oliveira
| 173.9k xp | 84 posts
Analista de Projetos e Melhoria Contínua

Oi Lais,

Eu gostaria de "ouvir" o evento quando eu clico na lista e não no botão.

Testei o código que você colocou e quando abro o console já aparece o "clicado" no console, sem precisar clicarno botão propriamente dito, até porque, pelo que deu a entender pelo curso, teria que ter um preventDefault para nao recarregar a página e a mensagem aparecer no console correto?

ainda não consegui :(

por Ricardo Mellegari de Oliveira
| 173.9k xp | 84 posts
Analista de Projetos e Melhoria Contínua

Lais, consegui o que queria fazer mas não entendi o por que risos

Com meu código assim:

var teste = document.querySelector('.exemplo');

teste.addEventListener("click", clicado);



function clicado(){

    console.log('clicado');
}

Tenho o resultado que quero, mas se eu coloco () depois do clicado como na linha abaixo

teste.addEventListener("click", clicado());

Ao carregar a página já aparece "clicado"no console. Isso significa que no addEventlistener os () depois da função faz ela executar automaticamente e sem os parenteses ela só é executada quando o evento ocorre?

solução!
por André Ferraz de Almeida
| 384.9k xp | 200 posts
Front-end Pleno

Olá Ricardo beleza? É exatamente isso! Quando você coloca o parênteses seguidos do nome da função você está chamando ela. Como você quer apenas que ela seja chamada ao clicar no botão, você deve colocá-la sem o parênteses.

O seu botão "teste" está com um evento de "click", nisto a função clicado() com o parênteses está sendo chamada assim que a página recarregar pois existe no elemento DOM um seletor "teste" com as condições que você escolheu. Para isso não ocorrer basta retirar os parênteses que está tudo certinho!

por Ricardo Mellegari de Oliveira
| 173.9k xp | 84 posts
Analista de Projetos e Melhoria Contínua

Obrigado!!