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

[Bug] CriaElemento parou de funcionar

Depois que fiz as alterações dessa aula as funções pararam de funcionar. Ao contrário do vídeo, assim que acrescento o itens.forEach e recarrego a página, ele deixa de criar o elemento e de salvar os itens no localStorage.

Meu JS:

const formulario = document.querySelector("#novoItem");
const lista = document.querySelector(".lista");
const itens = JSON.parse(localStorage.getItem["itens"]) || []

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

formulario.addEventListener("submit", (event) => {
    event.preventDefault();
    
    const nom = event.target.elements['nome'];
    const qtd = event.target.elements['quantidade'];
    
    const itemAtual = {
        "nome": nom.value,
        "quantidade": qtd.value
    };

    criaElemento(itemAtual);

    itens.push(itemAtual); // .push() acrescenta item ao final do array

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

    nom.value = '';
    qtd.value = '';
});

function criaElemento(item) {  
    if (item.quantidade == ''){
        item.quantidade = 1;
    };
    
    const numItem = document.createElement('strong');
    numItem.innerHTML = item.quantidade;
    
    const novoItem = document.createElement('li');
    novoItem.classList.add("item");
    novoItem.appendChild(numItem);
    
    novoItem.innerHTML += item.nome;
    
    lista.appendChild(novoItem);
}

Meu HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mochila de viagem</title>
    <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"> 
    <link rel="stylesheet" href="css/style.css">
</head>
<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" placeholder="Item para acrescentar">
                <label for="quantidade">Quantidade</label>
                <input type="number" name="quantidade" id="quantidade" placeholder="1">
                <input type="submit" value="Adicionar" class="cadastrar">
            </form>
        </div>
        
        <ul class="lista">
            <li class="item"><strong>7</strong>Camisas</li>
            <li class="item"><strong>1</strong>Calça</li>
        </ul>
    </main>
    <script src="js/main.js"></script>
</body>
</html>
1 resposta
solução!

Encontrei o erro:

Na linha 3 eu coloquei getItems["itens"] ao invés de .getItems("itens"). Ou seja, coloquei colchetes onde devia ser parênteses.

const itens = JSON.parse(localStorage.getItem("itens")) || []

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