图书馆项目技术问题：如何从数组中提取对象并展示至HTML元素？

我仔细看了你的代码，确实有几个小细节导致功能无法正常运行，下面是具体问题和修复方案：

问题分析 #

• 输入框获取错误：你用了document.querySelectorAll('.bookTitle')，这会返回一个NodeList，但页面里只有一个书名输入框，应该用document.querySelector('.bookTitle')获取单个元素，不然后续用bookInput[i].value会因为索引错误取不到正确的输入值。
• 循环逻辑错误：你用同一个索引i同时遍历图书数组和输入框列表，但输入框只有一个，根本不需要按数组索引去取值，这会导致匹配逻辑完全混乱。
• 字符串匹配不严谨：数组里的书名比如"HARRY POTTER "末尾有空格，用户输入时大概率不会加这个空格，而且大小写也可能不一致，直接用==匹配很容易失败，建议用trim()去除首尾空格，再统一转成大写（或小写）后比较。
• 多余的默认行为阻止：你的按钮类型是button，不会触发表单的默认提交行为，所以event.preventDefault()完全没必要，反而可能造成不必要的逻辑干扰。

修正后的完整代码 #

JavaScript部分 #

let libraryArray = [
  { AUTHOR: 'WILLIAM GOLDING', TITLE: 'LORD OF THE FLIES', PAGES: '224', READSTATUS: 'READ' }, 
  { AUTHOR: 'CS LEWIS', TITLE: 'THE HOBBIT', PAGES: '330', READSTATUS: 'UNREAD' }, 
  { AUTHOR: 'JK', TITLE: 'HARRY POTTER ', PAGES: '450', READSTATUS: 'READ' } 
];

document.querySelector('#findButton').addEventListener('click', function() {
  // 获取单个输入框的value，去除首尾空格并转大写
  const bookInputValue = document.querySelector('.bookTitle').value.trim().toUpperCase();
  
  // 遍历图书数组查找匹配项
  for (let book of libraryArray) {
    // 把数组里的书名也处理后再比较
    const bookTitle = book.TITLE.trim().toUpperCase();
    if (bookTitle === bookInputValue) {
      document.getElementById("Author").innerHTML = book.AUTHOR;
      document.getElementById("Title").innerHTML = book.TITLE;
      document.getElementById("numPages").innerHTML = book.PAGES;
      document.getElementById("readStatus").innerHTML = book.READSTATUS;
      // 找到匹配项后可以跳出循环，提升性能
      break;
    }
  }
}, false);

HTML部分（仅修正一处标签闭合问题，其余保持不变） #

<!--Libray card-->
<section>
  <div class="container-fluid">
    <div class="row align-items-center">
      <div class="col-lg-4 my-4">
        <div class="card mx-auto library-card text-center p-5">
          <div class="card-body">
            <p class="small card-text"> Copyrighted Material </p>
            <h3 class="card-title text-uppercase display-6">Library Card</h3>
            <div class="">_________________________</div>
            <div class="underline-space mb-3"></div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item text-uppercase mb-3" id="Author"></li>
              <li class="list-group-item text-uppercase mb-3" id="Title"></li>
              <li class="list-group-item text-uppercase mb-3">Number of Pages <p class="numPages" id="numPages"></p>
              </li>
              <li class="list-group-item text-uppercase mb-3 readStatus">Read Status <p class=" text-uppercase readStatus bg-white" id="readStatus"></p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- end of Library Card-->
      <!--Find a Book form -->
      <div class="col-lg-4">
        <form class="text-center bg-light p-5 rounded my-4 mx-auto addAuthor" id="findAuthor">
          <div class="form-group mx-auto">
            <h3 class="card-title text-uppercase display-6">Find a Book</h3>
            <div class="mb-4">___________________________</div>
            <input class="form-control text-uppercase mb-4 bookTitle" type="text" placeholder="Title" name="TITLE" value="">
            <br>
          </div>
          <button type="button" class="btn btn-primary btn-lg rounded-pill px-5" id="findButton">Submit</button>
        </form>
      </div>
</section>

另外，我还在JS里加了个小优化：找到匹配的图书后用break跳出循环，不用再遍历剩下的元素，能稍微提升一点性能~

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