Navigating a collection of objects after a button is clicked

Question

Navigating a collection of objects after a button is clicked

My current library project involves looping through an array of objects to display them on a grid based on input values. Here is the code snippet for my loop:

const addBook = (ev) => {
    ev.preventDefault();
    let myLibrary = [];
    let bookInfo = {
      title: document.getElementById('title').value,
      author: document.getElementById('author').value,
      pages: document.getElementById('pages').value,
    }
    myLibrary.push(bookInfo)
    for (i = 0; i < myLibrary.length; i++) {
      console.log(myLibrary)
      var container = document.getElementById('book-shelf')
      var div = document.createElement('div')
      div.classList.add('cell')
      container.appendChild(div);
    }
    var submitBtn = document.querySelector('.submit-btn');
    submitBtn.addEventListener('click', addBook)

However, I'm facing an issue where every time I enter title, author, and pages values and click the submit button, it adds multiple cells instead of just one. For example, entering the information once gives me 3 cells, entering it again gives me 6 cells, and so on. How can I change my code to ensure that only one cell is added each time I submit a new book?

javascript html css

Answer 1

Answer №1

There are a few key issues that need to be addressed.

The missing curly brace after the function and before the button listener is causing an error.
myLibrary is being redefined each time the function is called, leading to unnecessary data retrieval. It is recommended to define it outside the function so that books can be added one at a time when addBook is executed.
Since myLibrary is no longer being redefined, the loop can be eliminated. The HTML for the book can simply be added to the bookshelf onSubmit.

(Important: In the provided example code (with additional HTML elements, inputs, buttons, and logic to add new books to the shelf), the variable myLibrary has been renamed to

bookShelf</code to maintain consistency with the HTML naming convention.)</p>
<p><div>
<div>
<pre class="lang-js"><code>// Start by caching all required elements
const titleEl = document.getElementById('title');
const authorEl = document.getElementById('author');
const pagesEl = document.getElementById('pages');
const bookshelfEl = document.getElementById('bookshelf');
const submitBtn = document.querySelector('.submit-btn');

// Set up the event listener
submitBtn.addEventListener('click', addBook, false);

titleEl.focus();

// Declare the bookShelf variable outside of the function
const bookShelf = [];

function addBook() {

  // With cached elements, extract values easily
  const bookInfo = {
    title: titleEl.value,
    author: authorEl.value,
    pages: pagesEl.value,
  }

  bookShelf.push(bookInfo);

  // Extract individual variables from bookInfo
  const { title, author, pages } = bookInfo;

  // Create a row for the table data
  const row = document.createElement('tr')

  // Generate and append HTML to the table
  row.innerHTML = `
     <td>${title}</td>
     <td>${author}</td>
     <td>${pages}</td>
  `;

  bookshelfEl.appendChild(row);

}

table { border-collapse: collapse; border: 2px solid #565656; width: 100%; }
td { text-align: center; }
.heading { background-color: #efefef; border-top: solid thin #565656; }
tr { border: solid thin #ababab; }

<input placeholder="Title" id="title" />
<input placeholder="Author" id="author" />
<input placeholder="Pages" id="pages" />
<button type="button" class="submit-btn">Submit</btnotn>
<H3>Book shelf</H3>
<table>
  <tbody id="bookshelf">
    <tr class="heading">
      <td>Title</td>
      <td>Author</td>
      <td>Pages</td>
    </tr>
  </tbody>
</table>

Answer 2

There are a few key issues that need to be addressed.

The missing curly brace after the function and before the button listener is causing an error.
myLibrary is being redefined each time the function is called, leading to unnecessary data retrieval. It is recommended to define it outside the function so that books can be added one at a time when addBook is executed.
Since myLibrary is no longer being redefined, the loop can be eliminated. The HTML for the book can simply be added to the bookshelf onSubmit.

(Important: In the provided example code (with additional HTML elements, inputs, buttons, and logic to add new books to the shelf), the variable myLibrary has been renamed to

bookShelf</code to maintain consistency with the HTML naming convention.)</p>
<p><div>
<div>
<pre class="lang-js"><code>// Start by caching all required elements
const titleEl = document.getElementById('title');
const authorEl = document.getElementById('author');
const pagesEl = document.getElementById('pages');
const bookshelfEl = document.getElementById('bookshelf');
const submitBtn = document.querySelector('.submit-btn');

// Set up the event listener
submitBtn.addEventListener('click', addBook, false);

titleEl.focus();

// Declare the bookShelf variable outside of the function
const bookShelf = [];

function addBook() {

  // With cached elements, extract values easily
  const bookInfo = {
    title: titleEl.value,
    author: authorEl.value,
    pages: pagesEl.value,
  }

  bookShelf.push(bookInfo);

  // Extract individual variables from bookInfo
  const { title, author, pages } = bookInfo;

  // Create a row for the table data
  const row = document.createElement('tr')

  // Generate and append HTML to the table
  row.innerHTML = `
     <td>${title}</td>
     <td>${author}</td>
     <td>${pages}</td>
  `;

  bookshelfEl.appendChild(row);

}

table { border-collapse: collapse; border: 2px solid #565656; width: 100%; }
td { text-align: center; }
.heading { background-color: #efefef; border-top: solid thin #565656; }
tr { border: solid thin #ababab; }

<input placeholder="Title" id="title" />
<input placeholder="Author" id="author" />
<input placeholder="Pages" id="pages" />
<button type="button" class="submit-btn">Submit</btnotn>
<H3>Book shelf</H3>
<table>
  <tbody id="bookshelf">
    <tr class="heading">
      <td>Title</td>
      <td>Author</td>
      <td>Pages</td>
    </tr>
  </tbody>
</table>

Answer 3

Answer №2

The main issue lies within the loop structure in your code. Every time you click the submit button, a cell is added for each item in the myLibrary array. This repetitive process can be optimized by simply adding the cell directly when new book information is being added to myLibrary, eliminating the need for the for loop.

const addBook = (ev) => {
    ev.preventDefault();
    let myLibrary = [];
    let bookInfo = {
        title: document.getElementById('title').value,
        author: document.getElementById('author').value,
        pages: document.getElementById('pages').value,
    }
    myLibrary.push(bookInfo)
    var container = document.getElementById('book-shelf')
    var div = document.createElement('div')
    div.classList.add('cell')
    container.appendChild(div);
}
var submitBtn = document.querySelector('.submit-btn');
submitBtn.addEventListener('click', addBook)

Answer 4

The main issue lies within the loop structure in your code. Every time you click the submit button, a cell is added for each item in the myLibrary array. This repetitive process can be optimized by simply adding the cell directly when new book information is being added to myLibrary, eliminating the need for the for loop.

const addBook = (ev) => {
    ev.preventDefault();
    let myLibrary = [];
    let bookInfo = {
        title: document.getElementById('title').value,
        author: document.getElementById('author').value,
        pages: document.getElementById('pages').value,
    }
    myLibrary.push(bookInfo)
    var container = document.getElementById('book-shelf')
    var div = document.createElement('div')
    div.classList.add('cell')
    container.appendChild(div);
}
var submitBtn = document.querySelector('.submit-btn');
submitBtn.addEventListener('click', addBook)

Navigating a collection of objects after a button is clicked

Answer №1

Answer №2

Similar questions

Is it time to swap out those divs for tables in your email template?

Creating secure RSA keys using a predetermined seed - a step-by-step guide

JavaScript issue: "No relay configuration found" error specifically occurs in Internet Explorer versions 7 and 8

In Vue, the CropperJs image initially appears small, but it returns to its original size after editing

Issue with relative input causing Jquery click event to not fire

Ways to center Bootstrap panel in the middle of a webpage

The method of iterating over a string in key-value pairs

I am eager to retrieve the outcome once all the queries have been completed within the loop (using express.js, react.js, and MySQL)

How can I adjust the appearance of an HTML tag within an Angular component?

Is it possible to create HTML tables without including paragraphs within the cells using docutils rst2html?

Inserting multiple rows of data into a MySQL database in a single page using only one query in PHP

One effective way to transfer state to a child component using function-based React

Simplified JavaScript Object Structure

Having trouble creating a polygon from JSON in ESRI ArcGIS Javascript framework?

I am encountering difficulties adding an array to Firebase due to the lack of asynchronous nature in Node.js

How can we cycle through multiple colors using lerp in Three.js?

"Trouble with props: List items not showing up after refreshing the page

Unable to alter state from the onClick event of a dialog button

Changing the text alignment to justify in OWA - HTML emails

What could be causing my page to suddenly disappear?