Quando eu coloco console.log para ver o objeto, o id aparece. Ja que ele ja foi coloca na função criar elemento.Beleza.
if(existe) {
console.log(existe)
// itemAtual.id = existe.id;
atualizaElemento(itemAtual);
} else{
itemAtual.id = itens.length; //Tamanho da array
console.log(itemAtual)
criarElemento(itemAtual);
itens.push(itemAtual);
}
Mas quando eu comento a linha itemAtual.id = existe.id (que esta reatribuindo o id) e chamo a funçao atualizaElemento(itemAtual) passando objeto com id, se eu colocar um console.log dentro desta funçao atualizaElemento para o "imprimir" objeto, o id nao esta mais lá. Por que o id desaparece? Quando eu chamo a funçao, passo objeto completo (com id e seu valor), pq ele desaparece?
function atualizaElemento(item){
console.log(item)
document.querySelector("[data-id='"+item.id+"']").innerHTML = item.quantidade;
}
O codigo completo:
const form = document.getElementById('novoItem');
const lista = document.getElementById('lista');
const itens = JSON.parse(localStorage.getItem("itens")) || [];
itens.forEach((elemento) => {
criarElemento(elemento);
})
form.addEventListener('submit', (evento) =>{
evento.preventDefault();
//evento.target = form
const nome = evento.target.elements['nome'];
const quantidade = evento.target.elements['quantidade']
const existe = itens.find(elemento => elemento.nome === nome.value);
const itemAtual = {
"nome": nome.value,
"quantidade":quantidade.value
};
if(existe) {
console.log(existe)
itemAtual.id = existe.id;
atualizaElemento(itemAtual);
} else{
itemAtual.id = itens.length; //Tamanho da array
console.log(itemAtual)
criarElemento(itemAtual);
itens.push(itemAtual);
}
localStorage.setItem("itens", JSON.stringify(itens));
nome.value = "";
quantidade.value= "";
})
function criarElemento(item){
const novoItem = document.createElement('li');
novoItem.classList.add('item'); //Adicionando uma classe
const numeroItem = document.createElement('strong');
numeroItem.innerHTML = item.quantidade;
numeroItem.dataset.id = item.id;
novoItem.appendChild(numeroItem);
novoItem.innerHTML += item.nome;
lista.appendChild(novoItem);
}
function atualizaElemento(item){
document.querySelector("[data-id='"+item.id+"']").innerHTML = item.quantidade;
}