• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

124
Vistas
Push Method overwrites the array

I have an array and I want to simply push the item whenever a button clicked. But what happens is that the most recent pushed data overwrites the previous data of the array, I saw this when I am printing it. My primary requirements for the code is to implement the data structure of array while using objects/functions, thanks in advance for your help.

    let BookInfo = [];


    //create a storage for the book information
    let Book = 
    {
        Name: ' ' ,
        Author: ' ' ,
        Page: ' ',

        
        addItem : function()
        {
            Name = document.getElementById('bTitle').value;
            Author = document.getElementById('bAuthor').value;
            Page =  document.getElementById('bPages').value;

            this.Name = Name;
            this.Author = Author;
            this.Page = Page;

        

        BookInfo.push(Book);                            
        document.getElementById('showArr').innerHTML = JSON.stringify(BookInfo);
        
        }
    };
almost 3 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

push book into bookinfo after the end of book block

    let BookInfo = [];
    
    
        //create a storage for the book information
        let Book = 
        {
            Name: ' ' ,
            Author: ' ' ,
            Page: ' ',
    
            
            addItem : function()
            {
                Name = document.getElementById('bTitle').value;
                Author = document.getElementById('bAuthor').value;
                Page =  document.getElementById('bPages').value;
    
                this.Name = Name;
                this.Author = Author;
                this.Page = Page;
            
            }
        };
 BookInfo.push(Book);                            
            document.getElementById('showArr').innerHTML = JSON.stringify(BookInfo);
almost 3 years ago · Santiago Trujillo Denunciar

0

Just clone the object to BookInfo:

let BookInfo = [];


//create a storage for the book information
let Book = {
  Name: ' ',
  Author: ' ',
  Page: ' ',


  addItem: function() {
    Name = document.getElementById('bTitle').value;
    Author = document.getElementById('bAuthor').value;
    Page = document.getElementById('bPages').value;

    this.Name = Name;
    this.Author = Author;
    this.Page = Page;


    BookInfo.push(JSON.parse(JSON.stringify(Book)));
    document.getElementById('showArr').innerHTML = JSON.stringify(BookInfo);

  }
};
<input type="text" id="bTitle" value="aa">
<input type="text" id="bAuthor" value="bb">
<input type="text" id="bPages" value="cc">

<button onclick="Book.addItem()">
Click
</button>

<div id="showArr">

</div>

Also another way:

let BookInfo = [];


//create a storage for the book information
let Book = {
  Name: ' ',
  Author: ' ',
  Page: ' ',


  addItem: function() {
    Name = document.getElementById('bTitle').value;
    Author = document.getElementById('bAuthor').value;
    Page = document.getElementById('bPages').value;

    this.Name = Name;
    this.Author = Author;
    this.Page = Page;


    BookInfo.push({
    Name: this.Name,
    Author: this.Author,
    Page: this.Page,
    addItem: this.addItem
    });
    document.getElementById('showArr').innerHTML = JSON.stringify(BookInfo);

  }
};
<input type="text" id="bTitle" value="aa">
<input type="text" id="bAuthor" value="bb">
<input type="text" id="bPages" value="cc">

<button onclick="Book.addItem()">
Click
</button>

<div id="showArr">

</div>

almost 3 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda