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

DATASET.ID // IF não funciona. Console.log como UNDEFINED

Boa tarde,

Segue o código abaixo:

const form = document.getElementById("novoItem")
const lista = document.getElementById("lista")
const arrayItens = JSON.parse(localStorage.getItem("item")) || []
arrayItens.forEach((element) => {
    criarItens(element)
});

form.addEventListener("submit", (event) =>{
    event.preventDefault()


    const nome       =  event.target.elements["nome"]
    const quantidade =  event.target.elements["quantidade"]
/* Verificação , pegamos o nosso array e usamos um FIND, pegamos o elemento, nome elemento e igualamos ao nome.value e depois chamamos o IF */
    const verificar = arrayItens.find(element => element.nome === nome.value)

    objetoItens = {
        "nome"      : nome.value,
        "quantidade": quantidade.value
    }

//O if deve ser usado depois da criação do OBJETO.
//Colocamos como parametro o (verificar), SE o ID do objeto existir, quero que ele fique o mesmo.
//Pulamos para a function criarItens e criamos um DATASET
    if (verificar){
        objetoItens.id = verificar.id
        console.log(verificar.id)
    }
//Caso o item não exista, no else será chamado a função para criar o item, e o push do array, e colocamos para o id para ser igual ao tamanho do array
    else{
        objetoItens.id = arrayItens.lenght
        criarItens (objetoItens)
        arrayItens.push(objetoItens)
    }


    localStorage.setItem("item", JSON.stringify(arrayItens))

    nome.value      = ""
    quantidade.value= ""
})
function criarItens (item) {

    const itensLi = document.createElement("li")
    itensLi.classList.add("item");

    const quantidadeLi = document.createElement("strong")
    quantidadeLi.innerHTML = item.quantidade
    //Adicionamos o data-id no html e chamamos o dataset.id e igualamos ao item.id, para o mesmo receber um ID
    quantidadeLi.dataset.id = item.id

    itensLi.appendChild(quantidadeLi)

    itensLi.innerHTML+=item.nome
    lista.appendChild(itensLi)
}

2 respostas
solução!

Solucionado

Oi Rodolpho, tudo bem?

Que bom que conseguiu resolver o problema!

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software