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

[Dúvida] Como funciona a criação do "data-id" no elemento

Já consegui resolver a atividade e o meu código funciona sem bugs. Minha dúvida é onde o .id está sendo de fato criado, porque eu acredito que isso ocorra somente na chamada da function criaElemento, só que antes da chamada dela existe constantes que usam o .id na sua chamada.

Queria saber como o JavaScript está interpretando isso e como ele não buga. event listener com constante que recebe o .id e depois ativa a function que cria o data-idfunção que cria itens no HTML, entre esses itens, o data attribues

2 respostas

Aqui o código JavaScript:

const form = document.querySelector('#novoItem');
const lista = document.querySelector('#lista');
const itensTotais =  JSON.parse(localStorage.getItem('itens')) || [];

itensTotais.forEach(elemento => {
    criaItem(elemento);
});

form.addEventListener('submit', (evento) => {
    evento.preventDefault();
    const nomeItem = evento.target.elements.nome;
    const quantidadeItem = evento.target.elements.quantidade;

    const existe = itensTotais.find(elemento => elemento.nome === nomeItem.value);

    const itemAtual = {
        'nome': nomeItem.value,
        'quantidade': quantidadeItem.value
    }

    if(existe){
        itemAtual.id = existe.id;

        atualizaItem(itemAtual);
    } else {
        itemAtual.id = itensTotais.length;

        criaItem(itemAtual);
        itensTotais.push(itemAtual);
    }

    localStorage.setItem('itens', JSON.stringify(itensTotais));

    nomeItem.value = '';
    quantidadeItem.value = '';
    nomeItem.focus();
})

function criaItem (objeto) {
    //criar html
    const novaLi = document.createElement('li');
    novaLi.classList.add('item');

    const quantidadeLi = document.createElement('strong');

    quantidadeLi.innerHTML = objeto.quantidade;
    quantidadeLi.dataset.id = objeto.id;

    novaLi.appendChild(quantidadeLi);
    novaLi.innerHTML += objeto.nome;

    lista.appendChild(novaLi);
}

function atualizaItem (objeto) {
    document.querySelector(`[data-id="${objeto.id}"]`).innerHTML = objeto.quantidade;
}
solução!

Olá amigo, boa noite!

Existem duas coisas sendo criadas... O número do ID do elemento, que está armazenado no JSON salvo no Local Storage. Esse está sendo criado aqui:

    if(existe){
        itemAtual.id = existe.id;

        atualizaItem(itemAtual);
    } else {
        itemAtual.id = itensTotais.length;

        criaItem(itemAtual);
        itensTotais.push(itemAtual);
    }

E a outra coisa sendo criada é o data-attribute que está no elemento HTML e tem o nome de data-id. Esse sim, está na função criaElementos. Ele pega o valor do ID que foi criado anteriormente e armazenado no JSON (nessa parte que coloquei aqui em cima) e passa para o elemento no HTML como valor do data-attribute que tem o nome de ID. Ficando data-id="numero do id"

quantidadeLi.dataset.id = objeto.id;

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