Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Problema com a atualização da quantidades de itens na mochila.

Referente ao curso JavaScript na Web: armazenando dados no navegador

por Vladimir Kuhnen
| 70.8k xp | 25 posts

22

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
Nome Quantidade 
    <ul class="lista" id="lista">
        <li class="item"><strong>7</strong>Camisas</li>
        <li class="item"><strong>1</strong>Calça</li>
        <li class="item"><strong>3</strong>Casaco</li>
        <li class="item"><strong>3</strong>Meia</li>
        <li class="item"><strong>10</strong>Cuecas</li>
        <li class="item"><strong>2</strong>Tênis</li>
        </html>
    </ul>
</main>
<script src="js/main.js"></script>
``` 
const lista = document.getElementById("lista")
const itens = JSON.parse(localStorage.getItem("itens")) || []
itens.forEach((elemento) => {
    criaElemento(elemento)

})

console.log(form)
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)
    itens[existe.id] = 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;
}
5 respostas
por Victor Costa Santos
| 1937.4k xp | 3735 posts
Alura Scuba Team Monitor de ForumOps

Olá, Vladimi, tudo bem?

Uma possível solução para esse problema é verificar se o item já existe na lista antes de adicioná-lo novamente. Se o item já existir, você pode atualizar apenas a quantidade desse item, em vez de criar um novo elemento.

Aqui está uma possível implementação dessa solução:

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);
    itens[existe.id] = 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;
}

Nessa implementação, adicionamos uma verificação para verificar se o item já existe na lista usando o método find. Se o item já existir, atualizamos apenas a quantidade desse item usando a função atualizaElemento. Caso contrário, criamos um novo elemento para o item.

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Vladimir Kuhnen
| 70.8k xp | 25 posts

Continua o mesmo problema

por Victor Costa Santos
| 1937.4k xp | 3735 posts
Alura Scuba Team Monitor de ForumOps

Olá Vladimir!

O código acima é funcional para os itens recém criados ou adicionados na mochila e que fica guardado no Local storage, os <li> criado no seu HTML não vai funcionar, pois o HTML não recebe a leitura das funções, peço que apague o código que cria alguns itens para colocar somente os novos que serão adicionados, esses itens ficarão salvos na memória do seu computador, troque o final do seu HTML pelo seguinte código:

<body>
    <main class="conteudo">
        <div class="principal">
            <div class="mochila"></div>
            <form action="" class="adicionar" id="novoItem">
                <label for="nome">Nome</label>
                <input type="text" name="nome" id="nome">
                <label for="quantidade">Quantidade</label>
                <input type="number" name="quantidade" id="quantidade">
                <input type="submit" value="Adicionar" class="cadastrar" id="cadastrar">
            </form>
        </div>

        <ul class="lista" id="lista">
        </ul>
    </main>

    <script src="js/main.js"></script>
</body>

</html>

Deste modo seu código volta a funcionar normalmente, observe o resultado obtido e caso não seja isso o que você esperava me forneça mais detalhes a respeito.

  • Exemplificando o projeto

Caso não seja isso o erro, por favor compartilhe os erros no console, imagens ou parte da aula que deu dúvida, pois assim consigo lhe ajudar de forma mais assertiva sem ter chance de erro de interpretação, atualmente estou me baseando somente no título "Problema com a atualização da quantidades de itens na mochila." e talvez aí haja a confusão da minha parte.

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Vladimir Kuhnen
| 70.8k xp | 25 posts

Agora ele não adiciona nenhum iotem novo

solução!
por Vladimir Kuhnen
| 70.8k xp | 25 posts

CERTO!!! já tinha pensado em fazer isso. obrigado!