0

私はライブラリ アプリに取り組んでおり、ローカル ストレージのコンテンツをメイン ページに表示する必要があります。本の配列を取得する方法は知っていますが、テーブル内のページに表示するのに苦労しています。

ユーザーがフォームの送信ボタン (addBookToList()) をクリックすると、別の関数内にテーブルが作成されます。

ユーザーがページをリロードしたときに、同じ関数を再利用して同じテーブルのローカル ストレージから書籍を表示する方法はありますか?

HTML:

    <form action="#" class="form">
        <label for="title">Title</label>
        <input type="text" id="title" required>
        <label for="author">Author</label>
        <input type="text" id="author" required>
        <label for="num-pages">No. of pages</label>
        <input type="number" id="num-pages" required>
        <br>
        <span>Have you read this book?</span>
        <br>
        <input type="radio" name="radio" id="yes" value="yes" checked>
        <label for="yes" class="yes">Yes</label>
        <input type="radio" name="radio" id="no" value="no">
        <label for="no" class="no">No</label>
        <div class="button-div">
            <button id="add-btn" type="submit">SUBMIT</button>
        </div>
    </form>
</div>

<div class="table-box">
    <hr>
    <table>
        <thead>
            <tr>
                <th>Title</th>
                <th>Author</th>
                <th>No. of pages</th>
                <th>Read</th>
            </tr>
        </thead>
        <tbody class="list"></tbody>

    </table>
</div>

ジャバスクリプト:

// Get values
let formContainer = document.querySelector('.form-div');
let form = document.querySelector('.form');
let addBtn = document.querySelector('#add-btn');
let btnNewBook = document.querySelector('#addBook-btn');

// Book constructor
function Book(author, title, pages, read) {
this.title = title;
this.author = author;
this.pages = pages;
this.read = read;
}

// Empty array to store books
let myLibrary = [];

// Form event listener
form.addEventListener('submit', (e) => {
e.preventDefault();

  // Hide form and show home page
  document.querySelector('.table-box').style.display = 'block';
  document.querySelector('.para-div').style.display = 'block';
  form.style.display = 'none';

  // Get values from User
  let title = document.querySelector('#title').value;
  let author = document.querySelector('#author').value;
  let pages = document.querySelector('#num-pages').value;
  let read = getRead();

  // Instantiate book
  const book = new Book(author, title, pages, read);

  // Push book to the library, show it on the UI and clear the form
  myLibrary.push(book);

  addBookToList();

  // Add book to Local Storage
  addBook();

  // Show success alert
  showAlert('Book added!', 'success');

  // Clear form
  form.reset();

});

// Add book to list
function addBookToList() {
  const list = document.querySelector('.list');

  // Create new row element
  const row = document.createElement('tr');

  // Loop through myLibrary array
  myLibrary.forEach(value => {

    // Add the book to the table
        row.innerHTML = `
        <td>${value.title}</td>
        <td>${value.author}</td>
        <td>${value.pages}</td>
        <td>${value.read}</td>
        <td><a href="#" class="btn delete">X</a></td>`;
});

// Append the row to list
list.appendChild(row);
}

// Storage
function getLibrary() {
   if(localStorage.getItem('myLibrary') === null) {
     myLibrary = [];
   } else {
     myLibrary = JSON.parse(localStorage.getItem('myLibrary'));
   }
   return myLibrary;
 }

 function addBook() {
   localStorage.setItem('myLibrary', JSON.stringify(myLibrary));
 }

 function removeBook(index) {
   getLibrary();
   let removed = myLibrary.indexOf(index);
   myLibrary.splice(removed, 1);
   localStorage.setItem('myLibrary', JSON.stringify(myLibrary));
 }

 // Load page event listener
 document.addEventListener('DOMContentLoaded', function displayBooks(){

   getLibrary();
   addBookToList();

 });
4

1 に答える 1

0

私はあなたのコーディングスタイルがまったく好きではないと言います...しかし、これは私の意見では最適ではない単純な解決策です.

document.addEventListener('DOMContentLoaded', ()=>{
  const list = document.querySelector('.list'); // why get it again
  getLibrary();
  let row;
  for(let b of myLibrary){ // I like this kind of loop since you can break out of it if needed
    row = document.createElement('tr'); // new instance at each step of loop
    row.innerHTML = `<td>${b.title}</td>
      <td>${b.author}</td>
      <td>${b.pages}</td>
      <td>${b.read}</td>
      <td><a href="#" class="btn delete">X</a></td>`;
    }
    list.appendChild(row);
  }
});

于 2021-02-02T01:36:49.947 に答える