JavaScript对象中使用input输入值显示[object HTMLInputElement]如何解决

• 变量作用域不匹配：你在getUserName函数里用var定义的userName是函数内部的局部变量，外层代码根本读不到这个值。当外层代码尝试访问userName时，拿到的是浏览器自动挂载的全局同名对象——也就是id为userName的输入框DOM节点，这是浏览器长期保留的兼容特性：所有带id的DOM元素都会默认成为window对象的同名属性。DOM节点和字符串拼接时，会调用默认的toString方法，输出[object HTMLInputElement]，这就是页面显示异常内容的直接原因。
• 代码执行时机不对：你写的构造getname对象、调用.html()渲染页面的代码，会在页面刚加载完成时就立刻执行，完全不会等用户输入内容、触发change事件。退一步说就算作用域没问题，页面刚加载时输入框是空的，也拿不到用户输入的姓名。
• 存在多处基础语法问题：对象定义没有写闭合大括号、变量名大小写不一致（定义时用的是全小写getname，读取时写成了大写开头的getName）、读取对象属性时something没加引号，会被JS引擎识别为未定义的变量直接报错，页面里也缺少用来承载输出内容的id为character的容器。

核心调整逻辑：把取值、内容拼接、页面渲染的逻辑全部放到change事件的回调函数内部，保证用户输入完成触发事件时才执行相关逻辑，同时修正所有语法错误。

推荐写法（JS统一绑定事件） #

HTML部分：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="userName" placeholder="请输入姓名"/>
<div id="character"></div>

JS部分：

const userNameInput = document.getElementById('userName');
const characterContainer = $('#character');
// 监听输入框change事件，用户输入完成失焦时触发
userNameInput.addEventListener('change', function() {
  // 回调内部直接取输入值，不存在作用域问题
  const userName = this.value;
  const contentMap = {
    something: {
      character: `text ${userName} text`
    }
  };
  // 把拼接好的内容渲染到页面
  characterContainer.html(contentMap.something.character);
})

兼容原有行内事件绑定的写法 #

如果要保留你原来在input标签上写onchange的习惯，可以直接把渲染逻辑全部放到事件函数里：

function getUserName() {
  const userName = document.getElementById("userName").value;
  const getname = {
    something: {
      character: "text" + userName + "text"
    }
  };
  $("#character").html(getname.something.character);
}

input标签简化为：

<input type="text" id="userName" onchange="getUserName()"/>

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