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

Cannot read properties of null (reading 'appendChild')

Olá. Vi que haviam perguntado sobre isso aqui no fórum já, mas não funcionou pra mim. Meu código:

O forms:

<form action="" class="adicionar" id="novoItem">
                <label for="item">Nome</label>
                <input type="text" name="nome" id="nome">
                <label for="item">Quantidade</label>
                <input type="number" name="quantidade" id="quantidade">
                <input type="submit" value="Adicionar" class="cadastrar">
            </form>

Javascript:

const form = document.getElementById("novoItem");
const list = document.getElementById('lista');

form.addEventListener("submit", function(e){
    e.preventDefault();
    criaElemento(e.target.elements['nome'].value, e.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; 

    list.appendChild(novoItem);
}

Não consigo identificar o que pode está causando esse erro.

3 respostas

Boa noite! Aparentemente tua 'const list " ta vindo vazia, procurei no teu html e não achei uma tag com esse id

Arthur, aqui.

<body>
    <main class="conteudo">
        <div class="principal">
            <div class="mochila"></div>
            <form action="" class="adicionar" id="novoItem">
                <label for="item">Nome</label>
                <input type="text" name="nome" id="nome">
                <label for="item">Quantidade</label>
                <input type="number" name="quantidade" id="quantidade">
                <input type="submit" value="Adicionar" class="cadastrar">
            </form>
        </div>

        <ul class="lista">
            <li class="item"><strong>7</strong>Camisas</li>
            <li class="item"><strong>1</strong>Calça</li>
            <li class="item"><strong>3</strong>Casaco</li>
            <li class="item"><strong>3</strong>Meia</li>
            <li class="item"><strong>10</strong>Cuecas</li>
            <li class="item"><strong>2</strong>Tênis</li>
            <li class="item"><strong>1</strong>Celular</li>
            <li class="item"><strong>1</strong>Carregador</li>
            <li class="item"><strong>1</strong>Adaptador de tomada</li>
        </ul>
    </main>
    <script src="js/main.js"></script>
</body>
solução!

Acabei de perceber que pego a lista como Id, porém é uma classe. Porém mesmo alterando não muda o problema :/

Atualização: Consegui resolver rs mudei lista pra id