[Bug] Na linha do nome aparece: "[Object object]"

Olá Pedro, tudo bem?

O problema ocorre porque você está tentando atribuir diretamente o objeto evento.target.elements['nome'] ao valor nome.value, o que resulta na representação de objeto "[Object Object]". Para obter o valor correto do elemento de input, você precisa acessar sua propriedade value.

Para corrigir isso, você pode modificar a linha const nome = evento.target.elements['nome'] para const nome = evento.target.elements['nome'].value.

Aqui está o código corrigido:

const form = document.getElementById('novoItem');
const lista = document.getElementById('lista');
const itens = [];

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

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

    adicionaElemento(nome, quantidade);

    evento.target.reset();
});

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

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

    novoItem.appendChild(numeroDoItem);
    novoItem.innerHTML += nome;

    lista.appendChild(novoItem);

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

    itens.push(itemAtual);

    localStorage.setItem('item', JSON.stringify(itemAtual));
}

Com essa alteração, acredito que o valor correto do campo "nome" será capturado e o problema com a exibição "[Object Object]" será resolvido.

Seu código está muito semelhante ao da aula, caso não obtenha sucesso com essa modificação, seria ótimo se você pudesse compartilhar o código completo para que eu possa analisá-lo melhor. Além disso, se for possível, sugiro que você limpe o local storage antes de realizar os testes e do uso do "JSON.stringify". Isso pode ajudar a evitar conflitos ou problemas relacionados ao armazenamento local.

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!

Parece que o problema está ocorrendo porque você está sobrescrevendo o conteúdo HTML do elemento novoItem ao adicionar o nome do item usando novoItem.innerHTML += nome. Isso faz com que a estrutura do elemento seja substituída pelo valor do nome, resultando na perda do número do item e em uma exibição incorreta na lista.

Para corrigir isso, você pode criar um elemento separado para o nome do item e anexá-lo ao elemento novoItem. Aqui está uma modificação no seu código para resolver o problema:

javascript Copy code function adicionaElemento(nome, quantidade) { const novoItem = document.createElement("li"); // Cria um novo item para a lista novoItem.classList.add('item'); // Adiciona classe a esse item

const numeroDoItem = document.createElement('strong'); // Insere uma tag strong para o número
numeroDoItem.innerHTML = quantidade; // A quantidade do item fica dentro do HTML

const nomeDoItem = document.createElement('span'); // Cria um elemento para o nome do item
nomeDoItem.innerHTML = nome; // Define o valor do nome do item

novoItem.appendChild(numeroDoItem); // Adiciona, dentro da tag strong, o número do item
novoItem.appendChild(nomeDoItem); // Adiciona o elemento do nome do item

lista.appendChild(novoItem); // Adiciona à lista o novo item

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

itens.push(itemAtual);

localStorage.setItem('item', JSON.stringify(itemAtual));

} Com essa modificação, o número do item e o nome serão exibidos corretamente na lista, preservando a estrutura correta do elemento novoItem.

Espero que isso resolva o problema e você consiga adicionar itens corretamente à sua lista!