Push Method overwrites the array-CodePudding

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);
        
        }
    };

CodePudding user response：

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);

CodePudding user response：

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>