0

Array não adiciona um dado no formulário no último elemento através do método push em uma função click.

Fiz algumas pesquisas, mas não encontrei uma resposta significativa. A dúvida é de iniciante, criei um pequeno formulário em HTML, a ideia era pegar os dados digitados e enviar para um objeto e guardar os dados através de um array com um evento click, o array pegaria estes dados através do método push().

Com o código abaixo, os dados não deveriam ser adicionados a cada click no último elemento do array? Os dados estão sendo adicionados sempre no primeiro elemento sobrescrevendo o dado anterior.

Segue o código:

let botao = document.getElementById('botao')
botao.addEventListener('click', guardar)

let cadastro = []

function guardar() {
  let nome = document.getElementById('nome').value
  let idade = document.getElementById('idade').value
  let email = document.getElementById('email').value


  let pessoa = {
    nomeCliente: nome,
    emailCliente: email,
    idadeClient: idade
  }
  cadastro.push(pessoa)
}
<form>
  <ul style="list-style-type:none;">

    <li><label type="text" for="nome">Nome:</label>
      <input type="text" aria-required="true" id="nome"></li>
    <br>
    <li><label type="email" for="email">E-mail:</label>
      <input type="email" id="email"></li>
    <br>
    <li><label type="text" for="idade">Idade:</label>
      <input type="number" id="idade">
      <li>
        <br>
        <li><button type="submit" id="botao">Enviar</button></li>
  </ul>
</form>

6
  • mova a leitura dos valores, os let nome= .. etc para dentro da function que vai funcionar. outra coisa, por que criar um objeto pessoa se só vai adicionar o nomeCliente? Commented 14/06/2020 às 20:49
  • @RicardoPontual não vejo qual seria a diferença de mover o let nome para dentro da função... Samuel: podes mostrar mais código para podermos fazer um exemplo a funcionar? O teu código funciona, mas não sei onde usas esse cadastro... podes esclarecer?
    – Sergio
    Commented 15/06/2020 às 12:35
  • @Sergio Tudo bem? Sim, movendo o let nome não resolve, já tentei fazer isso, objetivo na verdade é cadastrar todo o objeto dentro do array, porém ele não cadastra, a cada click ele sobrescreve o primeiro elemento quando vou adicionar novos, o que não devia acontecer já que o push devia adicionar no último elemento do array, irei editar a pergunta junto com o código HTML. Commented 15/06/2020 às 23:27
  • Editei a pergunta para o código poder correr. Samuel: podes juntar mais código para o problema a que te referes ser reproduzido na pergunta?
    – Sergio
    Commented 16/06/2020 às 7:47
  • O problema está nessa linha <li><button type="submit" id="botao">Enviar</button></li> quando usa o <button type="submit"> você faz com que a página envie o formulário, no seu caso funcionando como um refresh não pretendido. Faça apenas <li><button type="button" id="botao">Enviar</button></li> Commented 16/06/2020 às 8:55

1 Resposta 1

0

Tenta dar um preventDefault() no form.

let botao = document.getElementById('botao')
botao.addEventListener('click', guardar)

let cadastro = []

function guardar(element) {
  element.preventDefault();

  let pessoa = {
    nomeCliente: document.getElementById('nome').value,
    emailCliente: document.getElementById('idade').value,
    idadeClient: document.getElementById('email').value,
  }
  cadastro.push(pessoa)
  console.log(cadastro)
}

as variáveis nome, email e idade são excesso de código.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .