1
resposta

Erro de Undefined

Na página a quantidade não está aparecendo.

Imagem mostrando o erro

O arquivo com o JS está assim:

const form = document.getElementById('novoItem');
const lista = document.getElementById("lista");
const itens = JSON.parse(localStorage.getItem("itens")) || [];

itens.forEach((elemento) => {
    criaElemento(elemento);
})

form.addEventListener('submit', (evento) => {
    evento.preventDefault();
    const nome = evento.target.elements['nome'];
    const quantidade = evento.target.elements['quantidade'];
    const itemAtual = {
        "nome": nome.value,
        "Quantidade": quantidade.value
    }
    criaElemento(itemAtual);
    itens.push(itemAtual);
    localStorage.setItem("itens", JSON.stringify(itens));
    nome.value = "";
    quantidade.value = "";
});

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

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

    novoItem.appendChild(numeroItem);
    novoItem.innerHTML += item.nome;
    lista.appendChild(novoItem)
}

Como posso resolver isso?

1 resposta

Olá Alberinando, tudo bem?

Pelo que pude observar no seu código, o erro está ocorrendo porque a propriedade "quantidade" do objeto "item" está em letra maiúscula na criação do elemento "numeroItem", mas em letra minúscula na hora de atribuir o valor ao elemento.

Para corrigir isso, basta alterar a linha que cria o elemento "numeroItem" para:

const numeroItem = document.createElement('strong');
numeroItem.innerHTML = item.Quantidade;

Assim, o valor da propriedade "Quantidade" será atribuído corretamente ao elemento.

Espero ter ajudado e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software