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

Não consigo limpar os campos após adicionar um item

Após adicionar um item a lista os campos não são limpos automaticamente mesmo com nome.value = "" e quantidade.value = ""

const form = document.querySelector('#novoItem')
const itens = []
const lista  = document.querySelector('#lista')

form.addEventListener('submit', (evento) => {
    evento.preventDefault()

    const nome = evento.target.elements['nome']
    const quantidade = evento.target.elements['quantidade']

    criaElemento(nome.value, quantidade.value)

    nome.value = ""
    quantidade.value = ""
})

function  criaElemento(nome, quantidade) {
    const novoItem = document.createElement('li')
    novoItem.classList.add('item')

    const numeroItem = document.createElement('strong')
    numeroItem.innerHTML = quantidade
    novoItem.appendChild(numeroItem)

    novoItem.innerHTML += nome

    lista.appendChild(novoItem)

    const itemAtual = {
        "nome": nome,
        "quantidade": quantidade
    }

    itens.push(itemAtual)

    localstorage.setItem("item", JSON.stringify(itens))
}
4 respostas

Olá Anna, tudo bem? se você compartilha seu código html, ficará mais fácil de te ajudar.

Mas vou tentar... Quando você colocar nome.value = "" e quantidade.value = "", você está limpando apenas os valores dessas variáveis. Pois você precisa pegar os campos que deseja limpar e depois setar "".

por exemplo:

const campoNome = document.querySelector('#nome');
campoNome.value  = "";

Este é o código HTML

<!DOCTYPE html>
<html lang="en">
<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="stylesheet" href="css/style.css">

    <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"> 
</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">
                <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>
solução!

Olá Anna,

O seu código está certinho! Há apenas um erro de digitação no "localstorage". O 's' é em letra maiúscula, "localStorage".

Faz a alteração e vê se funciona. Qualquer coisa me avisa!!

Funcionou sim, muito obrigada!