Erro no addEventListener | JavaScript

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Guilherme Fragnani Bez Fontana

| 155.6k xp | 23 posts

Back-end

var botaoAdicionar = document.querySelector("#btn-adicionar") botaoAdicionar.addEventListener("click", function(event){

event.preventDefault()

var form = document.querySelector("#form-adiciona")

var nome = form.nome.value 
var email = form.email.value
var telefone = form.telefone.value

var pacienteTr = document.createElement("tr")

var nomeTd = document.createElement("td")
var emailTd = document.createElement("td")
var telefoneTd =document.createElement("td")

nomeTd.textContent = nome
emailTd.textContent = email
telefoneTd.textContent = telefone

pacienteTr.appendChild(nomeTd)
pacienteTr.appendChild(emailTd)
pacienteTr.appendChild(telefoneTd)

var tabela = document.querySelector("#tabela-paciente")
tabela.appendChild(pacienteTr)})

da o seguinte erro no console do chrome:

Uncaught TypeError: Cannot read property 'addEventListener' of null at form.js:2

Obs: Usei o mesmo modelo de código do curso, que por sinal funcionou, mas agora quando tento criar o meu próprio não funciona

3 respostas

por Edwin Bulata Pancoti

| 127.9k xp | 57 posts

Desenvolvedor

29/01/2021

Boa tarde Guilherme,

Interpretando a mensagem de erro temos o seguinte:

Cannot read property 'addEventListener' of null

Uma tradução rápida seria algo assim:

Propriedade 'addEventListener' não pode ser lida no elemento nulo

Isso significa que ele não capturou o elemento corretamente na variável 'botaoAdicionar'. Dá uma olhada se você criou o botão com esse ID no seu form mesmo, provável que esteja faltando só o ID.

Copiei seu código aqui pra fazer alguns testes e também fiz alguns ajustes no JS adicionando ";" ao término das instruções, pois após corrigir o item do botão acima surgiu outro erro de JS.

O código final ficou dessa forma:

<!doctype html>
    <head>
        <meta charset="UTF-8">
        <title>Teste EventListener</title>
    </head>
    <body>
        <form id="form-adiciona">
            <input name="nome" value="">
            <input name="email" value="">
            <input name="telefone" value="">

                <input id="btn-adicionar" type="submit" value="adicioan">
        </form>

        <table id="tabela-paciente"></table>
    </body>
    <script>
        var botaoAdicionar = document.querySelector("#btn-adicionar");

        botaoAdicionar.addEventListener("click", function(event){
            event.preventDefault();

            var form = document.querySelector("#form-adiciona");

            var nome = form.nome.value;
            var email = form.email.value;
            var telefone = form.telefone.value;

            var pacienteTr = document.createElement("tr");

            var nomeTd = document.createElement("td");
            var emailTd = document.createElement("td");
            var telefoneTd =document.createElement("td");

            nomeTd.textContent = nome;
            emailTd.textContent = email;
            telefoneTd.textContent = telefone;

            pacienteTr.appendChild(nomeTd);
            pacienteTr.appendChild(emailTd);
            pacienteTr.appendChild(telefoneTd);

            var tabela = document.querySelector("#tabela-paciente");
            tabela.appendChild(pacienteTr);
        })
    </script>
</html>

É bom sempre finalizar as instruções com ";" no JS para que não ocorra como no seu código de colocar duas instruções na mesma linha e ele não entender.

Depois me fala se deu certo ;D

por Guilherme Fragnani Bez Fontana

| 155.6k xp | 23 posts

Back-end

29/01/2021

Deu certo sim, não costumava usar o ";" no js, vou começar a pegar o costume a partir de agora, muito obrigado

solução!

por Edwin Bulata Pancoti

| 127.9k xp | 57 posts

Desenvolvedor

29/01/2021

Ah isso aí, que ótimo :D

Isso mesmo tente usar sempre ";" no final das intruções sempre pra já se habituar.

Você precisa marcar o tópico como resolvido pra encerrá-lo.

Grande abraço.