[Dúvida] Nome e quantidade resultam em Undefined | JavaScript na Web: armazenando dados no navegador

Este é o meu código, porém ao enviar um novo item pra lista, em vez de escrever o nome e o número da quantidade, ele apenas escreve "undefined" para ambos. Qual seria a resolução desse problema?

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'].value;
    const quantidade = evento.target.elements['quantidade'].value;

    const itemAtual = {
        "nome": nome.value,
        "quantidade": quantidade.value
    }

    criaElemento(itemAtual);
    itens.push(itemAtual);
    localStorage.setItem("item", 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);
}

Olá Guilherme, tudo bem?

Muito provavelmente o problema está neste trecho do seu código:

const nome = evento.target.elements['nome'].value;
const quantidade = evento.target.elements['quantidade'].value;

const itemAtual = {
     "nome": nome.value,
     "quantidade": quantidade.value
}

Tanto a constante nome quanto a constante quantidade estão recebendo o valor presente nos campos "nome" e "quantidade". Sendo assim, os valores que estas constantes possuem são "strings" e o tipo "String" não possui a propriedade value que você tenta acessar ao criar o objeto do itemAtual o que acaba gerando o valor de retorno "undefined":

const itemAtual = {
     "nome": nome.value,
     "quantidade": quantidade.value
}

Logo, há duas alternativas para corrigir o código aqui. A primeira é, ao invés de guardar o valor dos campos nas constantes, guardar a referência dos campos em si conforme o código abaixo:

const nome = evento.target.elements['nome'];
const quantidade = evento.target.elements['quantidade'];

const itemAtual = {
     "nome": nome.value,
     "quantidade": quantidade.value
}

Perceba que agora não guardamos os valores dos campos do formulário nas constantes, mas sim, os campos em si. Logo, o valor das constantes não é mais "string" mas um objeto que presenta esse campo de formulário (geralmente HTMLInputElement ou alguma variação desse tipo de objeto) e que, por sua vez, possui a propriedade value que retorna o valor do campo referenciado.

Note que com essa alteração, as linhas finais do trecho do seu código...

nome.value = "";
quantidade.value = "";

... também passarão a funcionar limpando os campos do formulário ao final de cada registro de dados realizado (muito provavelmente isso não acontecia e o formulário continuava preenchido).

A segunda forma seria continuar guardando o valor dos campos nas constantes (como antes), mas removendo o uso da propriedade value na criação do objeto itemAtual:

const nome = evento.target.elements['nome'].value;
const quantidade = evento.target.elements['quantidade'].value;

const itemAtual = {
     "nome": nome,
     "quantidade": quantidade
}

Contudo, com essa abordagem, a limpeza dos campos do formulário ao final do processo de registro de um item não funcionaria (como acontece na forma anterior) pois não temos mais a referência dos campos guardada nas constantes, mas sim, seus valores. Assim, o trecho abaixo até mesmo poderia ser removido do código (ao se usar essa segunda opção de abordagem):

// trechos abaixo podem ser removidos
nome.value = "";
quantidade.value = "";

Faça as modificações e os testes e veja se deu certo.

Qualquer coisa, estamos por aqui.

Att.