如何将输入框的值传入JavaScript对象？解决输出[object HTMLInputElement]问题

DevOps 小满

2026-10-31

问题根因

输出[object HTMLInputElement]的核心原因是：你把整个输入框对应的DOM元素对象直接当成输入内容传给了Student实例，没有读取输入框内用户实际输入的文本。DOM对象在被插入到页面文本内容时，会默认转换为[object HTMLInputElement]的字符串形式，因此不会展示你预期的姓名内容。
除了传值错误外，原代码还存在两个关键逻辑问题：

取值方式错误：输入框的用户输入内容存在DOM元素的.value属性上，DOM元素本身不是输入值
时序错误：页面加载完成时就创建了Student实例，此时用户还未输入任何内容，即便取值正确，实例中存储的也只会是输入框的初始空值，无法获取用户后续输入的最新内容
变量引用混乱：原代码中nameStudent变量直接赋值为DOM元素，没有经过值转换就传入构造函数。

修正方案

按照以下逻辑调整代码即可解决问题：

页面加载阶段仅获取DOM元素的引用，不要在此阶段读取输入内容
把取值、创建Student实例、输出内容的逻辑全部挪到点击按钮的回调函数中，等用户完成输入、触发点击动作时，再实时读取输入框的当前值
调用Student类构造函数时，传入输入框.value对应的文本内容，不要传入DOM元素本身

修正后的参考代码：

// 页面加载时仅获取DOM引用
const inputInf = document.getElementById('inputInf');
const outputDom = document.getElementById("outputInfor");
const btn = document.getElementById("btn");

// 自定义Student类
class Student {
  constructor(name, studentNo) {
    this.name = name;
    this.studentNo = studentNo;
  }
}

// 点击事件回调内执行业务逻辑
btn.onclick = () => {
  // 实时读取输入框的当前输入文本
  const currentInput = inputInf.value.trim();
  // 传入实际文本值创建Student实例
  const student = new Student(currentInput, "替换为你的学号取值逻辑");
  // 输出实例中的姓名到页面
  outputDom.innerText = student.name;
}

如何将输入框的值传入JavaScript对象？ 解决输出[object HTMLInputElement]问题

如何将输入框的值传入JavaScript对象？解决输出[object HTMLInputElement]问题