1
resposta

[Dúvida] data-id fica só no 0

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+"']"))
}
1 resposta

Olá Henrique tudo bem com você? Espero que sim...

Entrei algumas inconsistência, a primeira é que você não esta atualizando o item com a quantidade.

function atualizaElemento(item) {
    console.log(document.querySelector("[data-id='"+item.id+"']"))
}

Outro problema é que você deve indicar a posição na qual vai sobre escrever o novo item, caso contrário você tera problema

if (existe) {
        itemAtual.id = existe.id; 
        atualizaElemento(itemAtual);
    } 
    else {
        itemAtual.id = itens.length;
        criaElemento (itemAtual);
        itens.push (itemAtual);
    }
}

Por tanto basta fazer as seguintes correções, que seu código deve funcionar perfeitamente.

function atualizaItem(item) {
    document.querySelector(`[data-id="${item.id}"]`).innerHTML = item.quantidade;
}

if (existeItem) {
        item.id = existeItem.id;
        atualizaItem(item);
        itens[item.id] = item;
    } else {
        item.id = itens.length;
        criaElemento(item);
        itens.push(item);
    }

** Obs: Na função que atualiza eu utilizei a sintaxe ${ }, ao invés de ' "+ +" ', outra coisa não esquece de tirar o console.log.


Espero ter ajudado a esclarecer sua dúvida. Se tiver mais alguma questão, é só perguntar!

Uma ótima semana e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado