Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Duvida sobre o id dentro da funcao AtualizaElemento

Quando eu coloco console.log para ver o objeto, o id aparece. Ja que ele ja foi coloca na função criar elemento.Beleza.

 if(existe) {
        console.log(existe)
        // itemAtual.id = existe.id;
    
        atualizaElemento(itemAtual);
    }  else{
        itemAtual.id = itens.length; //Tamanho da array
        console.log(itemAtual)
        criarElemento(itemAtual);
    
        itens.push(itemAtual);
    }

Mas quando eu comento a linha itemAtual.id = existe.id (que esta reatribuindo o id) e chamo a funçao atualizaElemento(itemAtual) passando objeto com id, se eu colocar um console.log dentro desta funçao atualizaElemento para o "imprimir" objeto, o id nao esta mais lá. Por que o id desaparece? Quando eu chamo a funçao, passo objeto completo (com id e seu valor), pq ele desaparece?

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

O codigo completo:


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



itens.forEach((elemento) => {
    criarElemento(elemento);
})

form.addEventListener('submit', (evento) =>{
    evento.preventDefault();

    //evento.target = form
    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) {
        console.log(existe)
        itemAtual.id = existe.id;
    
        atualizaElemento(itemAtual);
    } else{
        itemAtual.id = itens.length; //Tamanho da array
        console.log(itemAtual)
        criarElemento(itemAtual);
    
        itens.push(itemAtual);
    }

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

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

function criarElemento(item){

    const novoItem = document.createElement('li');
    novoItem.classList.add('item'); //Adicionando uma classe

    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;
 }
1 resposta
solução!

Olá, Iago! Tudo bem?

Pelo que entendi, você está tendo problemas com o id desaparecendo ao chamar a função atualizaElemento. Isso ocorre porque a função atualizaElemento está apenas atualizando o valor da quantidade no elemento HTML correspondente, e não o id.

O id é utilizado apenas para encontrar o elemento HTML correto a ser atualizado, mas não é necessário mantê-lo no objeto item passado para a função atualizaElemento. Portanto, não se preocupe se o id não aparecer mais quando você chamar a função atualizaElemento.

Espero ter ajudado e bons estudos!