基于Odin Project的图书馆项目输入字段存储异常问题咨询

Hey there! Let's figure out why your author and page count inputs aren't working as expected, and fix it up. I see a couple of key issues in your code that are causing the data storage and display to break.

What's Going Wrong? #

• Flat Array Storage: Right now, you're pushing each input value (title, author, pages) as separate items into itemsArray. This means your localStorage ends up with a list like ["Book1", "Author1", 100, "Book2", "Author2", 200]—there's no way to group which author/pages belong to which title, and this messes up rendering when you reload the page.
• Duplicate Table Cells: Your tdMaker function adds three identical <td> elements every time you call it. So for each input value, you're creating three copies of that value in the table, which makes the display totally out of sync with your inputs.

Fixed Code #

Let's rewrite parts of your JavaScript to fix these issues, plus adjust the HTML table structure to make sense for book entries:

Updated HTML (just the table section) #

<h2>Book info</h2>
<table id="table">
  <thead>
    <tr>
      <th>Title</th>
      <th>Author</th>
      <th>Pages</th>
    </tr>
  </thead>
  <tbody id="table-body"></tbody>
</table>
<button>Clear All</button>

Updated JavaScript #

const form = document.querySelector('form')
const button = document.querySelector('button')
const inputTitle = document.getElementById('item')
const inputAuthor = document.getElementById('author-input')
const inputPages = document.getElementById('number-input')
const tableBody = document.getElementById('table-body')

// Initialize books array from localStorage, default to empty array
let booksArray = localStorage.getItem('books') ? JSON.parse(localStorage.getItem('books')) : []
localStorage.setItem('books', JSON.stringify(booksArray))

// Function to create a full table row for a single book
const createBookRow = (book) => {
  const row = document.createElement('tr')
  
  // Create cells for each book property
  const titleCell = document.createElement('td')
  titleCell.textContent = book.title
  titleCell.style.backgroundColor = "white"
  titleCell.style.border = "solid"
  titleCell.style.fontWeight = "bold"
  
  const authorCell = document.createElement('td')
  authorCell.textContent = book.author
  authorCell.style.backgroundColor = "white"
  authorCell.style.border = "solid"
  authorCell.style.fontWeight = "bold"
  
  const pagesCell = document.createElement('td')
  pagesCell.textContent = book.pages
  pagesCell.style.backgroundColor = "white"
  pagesCell.style.border = "solid"
  pagesCell.style.fontWeight = "bold"
  
  // Add cells to the row, then row to the table body
  row.appendChild(titleCell)
  row.appendChild(authorCell)
  row.appendChild(pagesCell)
  tableBody.appendChild(row)
}

// Handle form submission
form.addEventListener('submit', function (e) {
  e.preventDefault()
  
  // Create a book object with all three fields grouped together
  const newBook = {
    title: inputTitle.value,
    author: inputAuthor.value,
    pages: inputPages.value
  }
  
  // Add the book object to the array and save to localStorage
  booksArray.push(newBook)
  localStorage.setItem('books', JSON.stringify(booksArray))
  
  // Render the new book in the table
  createBookRow(newBook)
  
  // Clear all input fields
  inputTitle.value = ''
  inputAuthor.value = ''
  inputPages.value = ''
})

// Render existing books when the page loads
const savedBooks = JSON.parse(localStorage.getItem('books'))
savedBooks.forEach((book) => {
  createBookRow(book)
})

// Handle "Clear All" button click
button.addEventListener('click', function () {
  localStorage.clear()
  while (tableBody.firstChild) {
    tableBody.removeChild(tableBody.firstChild)
  }
  // Reset the books array after clearing
  booksArray = []
})

Key Changes Explained #

1. Object-Based Storage: Now we're storing each book as an object with title, author, and pages properties. This keeps related data grouped together, so we never lose track of which author/pages belong to which book.
2. Row-Based Rendering: Instead of creating duplicate cells, we make a full table row (<tr>) for each book, with one cell per field. This makes the table display clean and organized.
3. Better Table Structure: Added a <thead> for column headers and a <tbody> to hold book rows—this is standard HTML table practice and makes the code easier to maintain.
4. Clearer Variable Names: Renamed input to inputTitle and inputNumber to inputPages to make the code more readable (always a good habit when you're starting out!).

Give this a try, and your author and page count inputs should work perfectly now. Let me know if you run into any other snags!

内容的提问来源于stack exchange，提问作者someone