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

Uncaught TypeError

por mbthales
| 200.1k xp | 165 posts

Eu estava estudando após assistir umas aulas e me deparei com o seguinte erro. 

Uncaught TypeError: Cannot read property 'addEventListener' of null

E consegui resolver com um evento "load". Entretanto, após isso, o botão não responde mais. Segue o código:

<form>
     <input class="teste" type="text">
    <button class="botao">Clique Aqui</button>
</form>


document.addEventListener("load", function () {
    var botao = document.querySelector('.botao');

    botao.addEventListener("click", function (event) {
        event.preventDefault();
        console.log("Olá, isso é um teste!")
    });
});
6 respostas
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Oi Thales tudo bem?

Você tem que prevenir o evento do formulário e não do botão, se prevenir o evento do botão que é clicar não acontece nada.

Veja como ficaria o código:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form>
        <input class="teste" type="text">
        <button class="botao">Clique Aqui</button>


    </form>


</body>

<script>


        var form = document.querySelector('form');

        form.addEventListener("submit", function (event) {
            event.preventDefault();
            console.log("Olá, isso é um teste!")
        });



</script>

</html>

Espero ter ajudado!!!

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Thales, tudo bem? No seu caso, o botão por padrão é submit, dessa maneira, vai submeter o form que ira ocasionar um refresh na página.

Para resolver o problema, sugiro adicionar type="button" para seu botão:

<button class="botao" type="button">Clique Aqui</button>

Sobre o load, se você precisa executar determinado código JavaScript, sugiro utilizar DOMContentLoaded:

document.addEventListener("DOMContentLoaded", function () {
    var botao = document.querySelector('.botao');

    botao.addEventListener("click", function (event) {
        event.preventDefault();
        console.log("Olá, isso é um teste!")
    });
});

Essas mudanças devem resolver seu problema.

Espero ter ajudado.

por mbthales
| 200.1k xp | 165 posts

Obrigado pelas respostas, as duas funcionaram muito bem. Mas Matheus, poderia explicar a diferença entreload e DOMContentLoaded ? Pelo o que eu vi, as duas tem o mesmo objetivo.

solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

A diferença é bem simples:

  • load: Ele é disparado quando a página é carregada, ou seja, é disparado como último passo para carregamento da página, imagens, iframes, css, etc...
  • DOMContentLoad: É disparado quando o DOM está pronto, sem stylesheet bloqueando a execução de JavaScript.

Seguramente, nós realizamos manipulações assim que o DOM está pronto, por isso, usamos o DOMContentLoad.

Espero ter ajudado.

por mbthales
| 200.1k xp | 165 posts

Novamente, obrigado pela ajuda!

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

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

Abraços e bons estudos.