登录页面点击按钮显示用户名返回[object HTMLCollection]问题求助

问题原因 #

你用document.getElementsByClassName("Nombre")获取的是HTMLCollection元素集合，不是输入框里的文本值。直接把这个集合和字符串拼接，JS会自动将其转为默认的字符串表示[object HTMLCollection]，这就是你看到的结果。

修复方案 #

核心是获取输入框的value属性（即用户输入的内容），有两种简单实现方式：

方式1：从元素集合中取目标输入框并获取值

修改JS代码，点击按钮时再获取输入框的实时值：

function entrar() {
  // 从class集合中取出唯一的输入框，获取当前输入值
  var nombre = document.getElementsByClassName("Nombre")[0].value;
  // 清空body内容
  document.body.innerHTML = "";
  // 创建并添加欢迎文本
  var Elemento = document.createElement("h1");
  Elemento.textContent = "bienvenido " + nombre;
  document.body.appendChild(Elemento);
}

方式2：利用输入框的ID直接获取（更高效）

因为用户名输入框有id="Name"，用getElementById可以直接定位元素，比通过class获取更精准：

function entrar() {
  var nombre = document.getElementById("Name").value;
  document.body.innerHTML = "";
  var Elemento = document.createElement("h1");
  Elemento.textContent = "bienvenido " + nombre;
  document.body.appendChild(Elemento);
}

完整修正代码 #

HTML

<div class="Todo">
  <div class="Login">
    <h2>Nombre</h2>
    <input type="text" class="Nombre" id="Name">
  </div>
  <div class="contenedor">
    <h2 class="palabra">Contraseña</h2>
    <input type="password" id="Contraseña" class="Contraseña">
  </div>

  <button type="button" onclick=entrar()>Entrar</button>
</div>

CSS

.contenedor {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Login {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Todo {
  display: block;
  justify-content: center;
}

JS

function entrar() {
  var nombre = document.getElementById("Name").value;
  document.body.innerHTML = "";
  var Elemento = document.createElement("h1");
  Elemento.textContent = "bienvenido " + nombre;
  document.body.appendChild(Elemento);
}

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