Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Elemento não atualiza (id: undefined)

elemento sem atualizar por id estar indefinido

const form = document.getElementById("novoItem");
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 = itens[itens.lenght - 1]? (itens[itens.lenght - 1]).id + 1 : 0;

        atualizaElemento(itemAtual);

        itens[itens.findIndex(elemento => elemento.id === existe.id)] = itemAtual;
    } else {
        itemAtual.id = itens.lenght;

        criaElemento(itemAtual);

        itens.push(itemAtual);
    }

    localStorage.setItem("itens", 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;
    numeroItem.dataset.id = item.id;
    novoItem.appendChild(numeroItem);
    novoItem.innerHTML += item.nome;

    novoItem.appendChild(botaoDeleta(item.id));

    const lista = document.getElementById("lista");
    lista.appendChild(novoItem);
}

function atualizaElemento(item) {
    document.querySelector("[data-id='" + item.id +"']").innerHTML = item.quantidade;
}

function botaoDeleta(id) {
    const elementoBotao = document.createElement("button");
    elementoBotao.innerText = "X";

    elementoBotao.addEventListener("click", function() {
        deletaElemento(this.parentNode, id);
    });

    return elementoBotao
}

function deletaElemento(tag, id) {
    tag.remove();

    itens.splice(itens.findIndex(elemento => elemento.id === id), 1);

    localStorage.setItem("itens", JSON.stringify(itens));
}
2 respostas
solução!

Boa tarde Gabriel,

Na linha abaixo, ao invés do método find, utilize o findIndex, pois no primeiro é retornado o valor e no segundo o índice.

const existe = itens.find( elemento => elemento.nome === nome.value);

Depois existe um erro na lógica do código abaixo também:

if (existe) {
        itemAtual.id = itens[itens.lenght - 1]? (itens[itens.lenght - 1]).id + 1 : 0;

        atualizaElemento(itemAtual);

        itens[itens.findIndex(elemento => elemento.id === existe.id)] = itemAtual;
    } else {
        itemAtual.id = itens.lenght;

        criaElemento(itemAtual);

        itens.push(itemAtual);
    }

o correto seria;

if (existe) {
        itemAtual.id = existe.id;

        atualizaElemento(itemAtual);

        itens[itens.findIndex(elemento => elemento.id === existe.id)] = itemAtual;
    } else {
        itemAtual.id = itens[itens.length - 1] ? (itens[itens.length -1]).id + 1 : 0;

        criaElemento(itemAtual);

        itens.push(itemAtual);
    }

Oi, Mateus.

Eu usei o find ao invés do findIndex porque o objetivo é conseguir o valor mesmo. Quanto ao erro de lógica, muito obrigado! Era isso mesmo que eu precisa fazer.