使用getElementsByClassName后，如何提取input元素的value值？

你遇到的核心问题是对innerHTML的用途理解有误，以及没找对获取输入框值的正确属性：

为什么innerHTML会返回整个input标签？ #

<input>是自闭合元素，它没有内部HTML内容（不像<div>这类可以包裹子元素的标签），所以innerHTML会直接返回该元素本身的完整HTML代码，这显然不是你需要的结果。

正确获取input值的方法 #

要提取输入框的内容，直接访问元素的.value属性就可以了，这是表单元素专门用来获取/设置输入值的属性。

修正你的代码 #

把book[0].innerHTML替换为book[0].value即可，同时建议加个存在性判断避免报错：

function save_book(event){ 
  var id = event.target.id; 
  var book = document.getElementsByClassName(id); 
  // 先检查是否找到元素，避免数组越界报错
  if(book.length > 0) {
    console.log(book[0].value); // 这里会输出"Algorithms to live by"
  } else {
    console.log(`没有找到class为${id}的元素`);
  }
}

额外优化建议 #

1. 如果你是想用按钮的id匹配input的class，这个逻辑没问题，但如果是想通过id直接选中元素，建议用document.getElementById(id)，它比getElementsByClassName更高效且精准（毕竟id是唯一的）。
2. 也可以用更现代的document.querySelector简化代码：

function save_book(event){ 
  var className = event.target.id; 
  var bookElement = document.querySelector(`.${className}`);
  if(bookElement) {
    console.log(bookElement.value);
  }
}

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