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>
let nome= ..
etc para dentro da function que vai funcionar. outra coisa, por que criar um objeto pessoa se só vai adicionar o nomeCliente?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 essecadastro
... podes esclarecer?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.<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>