如何通过JavaScript正确读取HTML <input>元素的值？

常规的element.value方法本身是正确的，你得到空白值的核心问题是代码执行时机不对——要么是在页面DOM还没加载完成就调用了读取代码，要么是在用户还没输入内容时就触发了读取操作。

以下是几种可靠的解决方式：

• 监听输入事件实时读取
  绑定input事件，在用户输入过程中实时获取内容：

  const inputElement = document.getElementById('input_id');
  inputElement.addEventListener('input', function() {
    const inputValue = this.value;
    console.log(inputValue);
  });
  

• 通过交互触发读取
  比如绑定按钮点击事件，在用户确认输入后再读取：

  <input type="text" id="input_id">
  <button id="readBtn">读取输入</button>
  

  const readBtn = document.getElementById('readBtn');
  const inputElement = document.getElementById('input_id');
  
  readBtn.addEventListener('click', function() {
    const inputValue = inputElement.value;
    console.log(inputValue);
  });
  

• 确保DOM加载完成后执行代码
  如果要在页面加载后初始化相关逻辑，把代码放在DOMContentLoaded事件回调里，避免因元素未解析导致的读取失败：

  document.addEventListener('DOMContentLoaded', function() {
    const inputElement = document.getElementById('input_id');
    // 在这里绑定事件或执行后续操作
  });
  

内容的提问来源于stack exchange，提问作者J. C. Stark