1
resposta

[Dúvida] A alteração ocorre apenas no elemento 0

Tento modificar outros elementos que já existem na lista mas só atualiza o [0]. Fiz igual ao professor mas não soube corrigir.

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
}
1 resposta

Olá Ayrles, tudo bem?

Pelo que entendi do seu código, você está tentando atualizar elementos que já existem na lista, mas a alteração só ocorre no elemento 0. Isso pode estar acontecendo porque você está utilizando o método querySelector na função atualizaElemento, que seleciona apenas o primeiro elemento que corresponde ao seletor especificado.

Para corrigir isso, você pode utilizar o método querySelectorAll, que retorna uma lista de todos os elementos que correspondem ao seletor especificado. Em seguida, você pode percorrer essa lista e atualizar cada elemento individualmente.

Por exemplo:

function atualizaElemento(item) {
  const elementos = document.querySelectorAll("[data-id='"+item.id+"']")
  elementos.forEach(elemento => {
    elemento.innerHTML = item.quantidade
  })
}

Espero que isso ajude! Se ainda tiver alguma dúvida, é só perguntar.

Bons estudos!