HTML与JS交互故障：表单值获取TypeError报错求助

报错原因分析 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'value')，本质是JS代码找不到目标输入元素，返回了undefined，再去读取value属性就会报错。核心问题是每个输入项都放在单独的<form>里，若你的JS选择器没精准定位到对应<form>内的元素，就会出现找不到的情况。

可行解决方案 #

方案1：精准定位对应内的输入元素

给每个<form>添加唯一ID，通过ID定位到目标表单后，再查找里面的输入框，确保不会找错元素。

HTML示例：

<form id="bookIdForm">
  <label for="bookId">Book ID #:</label>
  <input type="text" id="bookId" name="bookId">
</form>

<!-- 其他输入项的表单 -->
<form id="bookTitleForm">
  <label for="bookTitle">Book Title:</label>
  <input type="text" id="bookTitle" name="bookTitle">
</form>

<form id="submitForm">
  <button type="button" onclick="addBook()">Add A New Book</button>
</form>

addBook.JS示例：

function addBook() {
  // 先找到Book ID所在的表单，再获取输入框
  const bookIdForm = document.getElementById('bookIdForm');
  const bookIdInput = bookIdForm?.querySelector('#bookId');
  
  if (bookIdInput) {
    alert(`Book ID: ${bookIdInput.value}`);
  } else {
    alert('未找到Book ID输入框，请检查元素ID是否正确');
  }
}

方案2：用布局标签替代多保留页面格式

如果不想保留多结构，可将所有输入项放在同一个主<form>中，用<div>、<section>或CSS类做布局分隔，完全能复刻之前的页面样式，同时避免多表单带来的元素查找问题。

HTML示例：

<form id="bookForm">
  <div class="input-section">
    <label for="bookId">Book ID #:</label>
    <input type="text" id="bookId" name="bookId">
  </div>

  <div class="input-section">
    <label for="bookTitle">Book Title:</label>
    <input type="text" id="bookTitle" name="bookTitle">
  </div>

  <button type="button" onclick="addBook()">Add A New Book</button>
</form>

CSS示例（复刻原多样式）：

.input-section {
  margin: 1rem 0;
  padding: 0.5rem;
  /* 这里添加你原来给<form>设置的样式 */
}

JS示例：

function addBook() {
  const bookId = document.getElementById('bookId')?.value;
  if (bookId !== undefined) {
    alert(`Book ID: ${bookId}`);
  } else {
    alert('未找到Book ID输入框');
  }
}

方案3：直接通过唯一ID跨获取元素

只要输入框的ID是全局唯一的，不管它在哪个<form>里，document.getElementById都能直接找到它，无需考虑表单层级。

addBook.JS示例：

function addBook() {
  // 直接通过ID获取，无视所在表单
  const bookIdInput = document.getElementById('bookId');
  if (bookIdInput) {
    alert(`Book ID: ${bookIdInput.value}`);
  } else {
    alert('请检查Book ID输入框的ID是否正确');
  }
}

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