2
respostas

[Dúvida] id undefined ! me ajudem ...

Não consigo fazer o id retornar ! ele fica como undefined , e acho que por isso ele só atualiza o meu elemento 0 , sou iniciante e nao sei bem ainda ! imagem exercicio

// Operador lógico que retorna com dados salvos, ou string vazia, utilizando localStorage.getItem, modificando o valor de `string` com JSON.parse()

const form = document.getElementById("novoItem");
const lista = document.getElementById("lista");
const itens = JSON.parse(localStorage.getItem("itens")) || [];

// Uso do forEach para que todos os itens já escritos na lista sejam mantidos ao atualizar a página
itens.forEach((elemento) => {
  criaElemento(elemento);
});

// Refatoração do addEventListener para receber as funções extras da função criaElemento
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);
  console.log(existe)

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

  if (existe) {
    itemAtual.id = existe.id;
    AtualizaElemento(itemAtual);
  } else {
    itemAtual.id = itens.lenght;

    criaElemento(itemAtual);

    itens.push(itemAtual);
  }

  localStorage.setItem("itens", JSON.stringify(itens));

  nome.value = "";
  quantidade.value = "";
});

// Refatoração da função `criaElemento` para que possua apenas a função que faça sentido ao nome.

function criaElemento(item) {
  const novoItem = document.createElement("li");
  novoItem.classList.add("item");

  const numeroItem = document.createElement("strong");
  //console.log(numeroItem)

  numeroItem.innerHTML = item.quantidade;
  console.log(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 }
function AtualizaElemento(item) {
  document.querySelector("[data-id='" + item.id + "']").innerHTML=item.quantidade
}
# 
2 respostas

Salve Gabriel!!

amigo na tentativa de lhe ajudar encontrei esses ajustes que precisam ser feitos:

const existe = itens.find((elemento) => elemento.nome === nome.value); console.log(existe) r => esse primeiro elemento não precisa ficar entre parêntese.

const itemAtual = { nome(esse nome tem que ficar entre aspas): nome.value, quantidade(essa quantidade tem que ficar entre aspas): quantidade.value,

};

seu codigo corrigido deve ficar assim:

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

const itemAtual = { "nome": nome.value, "quantidade": quantidade.value, }; um abraço

Oi, Gabriel.

Já descobriu o que aconteceu? Estou com o mesmo problema e não sei como resolver.