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

[Dúvida] Não está somando o valor na lista, está substuindo

Oi, no meu código, estou adicionando os objetos na lista, porém, quando eu coloco um objeto repetido é pra somar, mas ele está substituindo. Como posso resolver? Meu código em 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 = ""
})

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) {
    document.querySelector("[data-id='"+item.id+"']").innerHTML = item.quantidade
}
2 respostas
solução!

Olá Pedro, tudo bem?

Para resolver esse problema, você precisa modificar a lógica na função criaElemento e na verificação de existência.

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 itemExistente = itens.find((elemento) => elemento.nome === nome.value);

  const itemAtual = {
    nome: nome.value,
    quantidade: parseInt(quantidade.value),
  };

  if (itemExistente) {
    itemExistente.quantidade += itemAtual.quantidade;
    atualizaElemento(itemExistente);
  } else {
    itemAtual.id = itens.length;
    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;

  lista.appendChild(novoItem);
}

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

Agora, ao adicionar um objeto com o mesmo nome, a quantidade será somada em vez de substituída

Mas uma observação Pedro, na aula a forma utilizada é essa que o seu código está atualmente, o termo "atualizar" neste caso significa passar um novo valor suponhamos que temos 3 canetas e depois pegamos duas nessa mochila imaginaria rsrs, a quantidade ia ser atualizada para somente 1, mas fique tranquilo sua sugestão acredito que agora está funcional.

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

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Obrigado, funcionou.