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

[Bug] o codigo não adiciona o li e retorna um erro quando vai executar o addEventListiner

codigo

const form = document.getElementById("novoItem")  
const lista = document.getElementById("lista")

form.addEventListener("submit", (evento) => {
    evento.preventDefault()

    criaElemento(evento.target.elements['nome'].value, evento.target.elements['quantidade'].value)
})

function criaElemento(nome, quantidade) {
    const novoItem = document.createElement('li')
    novoItem.classList.add("item")

    const numeroItem = document.createElement('strong')
    numeroItem.innerHTML = quantidade

    novoItem.appendChild(numeroItem)
    novoItem.innerHTML += nome

    lista.appendChild(novoItem)
}

erro

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at main.js:4:6
3 respostas

Oi, Henrique

Não pode ler propriedade de um valor nulo

Então "form" está retornando nulo

const form = document.getElementById("novoItem")

Verifique se no index.html está correto o:

<form action="" class="adicionar" id="novoItem">    

Mas quando faço as mesmas coisas pelo console ele retorna um html! Imagem do console.

Quando boto isso no arquivo ele também retorna null

console.log(document.getElementById("novoItem"));
solução!

já resolvi o problema, eu tinha chamado o arquivo antes do html e isso fazia que o arquivo fosse executado antes da pagina carregar