Boa noite!
Estou com um pequeno problema, pois quando adiciono o primeiro item na lista, ele acha o id ''0'', porem quando adiciono um segundo item na lista, ele continua no id ''1''... alguem tem uma luz?
JS
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 existe = itens.find(elemento => elemento.nome === nome.value)
const itemAtual = {
"nome": nome.value,
"quantidade": quantidade.value
}
if (existe) {
itemAtual.id = existe.id;
atualizaElemento(itemAtual);
}
else {
itemAtual.id = itens.length;
criaElemento (itemAtual);
itens.push (itemAtual);
}
localStorage.setItem("itens", JSON.stringify(itens));
nome.value = "";
quantidade.value = "";
evento.preventDefault()
})
function criaElemento (item) {
const novoItem = document.createElement('li')
novoItem.classList.add('item')
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) {
console.log(document.querySelector("[data-id='"+item.id+"']"))
}