Tengo una matriz y simplemente quiero presionar el elemento cada vez que se hace clic en un botón. Pero lo que sucede es que los datos enviados más recientes sobrescriben los datos anteriores de la matriz, vi esto cuando lo estoy imprimiendo. Mis requisitos principales para el código son implementar la estructura de datos de la matriz al usar objetos/funciones, gracias de antemano por su ayuda.
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); } };
empujar el libro a la información del libro después del final del bloque del libro
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);
Simplemente clone el objeto en 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>
También de otra manera:
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>