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