Array does not add data to the last element via the push method in a click function

Asked

Viewed 164 times

1

Array does not add a data in the form in the last element via the push method in a click function.

I did some research, but I couldn’t find a meaningful answer. The question is of beginner, I created a small form in HTML, the idea was to take the typed data and send to an object and save the data through an array with a click event, the array would take this data through the push method().

With the code below, shouldn’t the data be added to each click on the last element of the array? Data is always being added to the first element by overwriting the previous data.

Follows the code:

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>

javascript array-push

  • move the reading of the values, the let nome= .. etc into the Function that will work. something else, why create a person object if it will only add the client name?

  • @Ricardopunctual do not see what would be the difference of moving the let nome into the function... Samuel: Can you show more code so that we can make a working example? Your code works, but I don’t know where you use that cadastro... you can clarify?

  • @Sergio All right? Yes, moving the let nome does not solve, I tried to do this, goal is actually to register the whole object inside the array, but it does not register, every click it overwrites the first element when I add new ones, which should not happen since the push should add in the last element of the array, I will edit the question along with the HTML code.

  • I edited the question so the code can run. Samuel: You can add more code to the problem you refer to in the question?

  • The problem lies in that line <li><button type="submit" id="botao">Enviar</button></li> when you use the <button type="submit"> you make the page send the form, in your case working as an unintended refresh. Just do <li><button type="button" id="botao">Enviar</button></li>

  • Wow! Thanks @Augustovasques and the staff for the availability, it’s this kind of problem that makes me go further, something as simple as a Ubmit button that I’ve seen happening a thousand times... Finally Brigadão.

Show 1 more comment

1 answer

0

Try to give a preventDefault() in the 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)
}

the variables name, email and age are code excess.

Browser other questions tagged javascript array-push

You are not signed in. Login or sign up in order to post.