点击按钮后控制台值更新但input输入框值未变化，代码哪里出错？

数据老陈

2026-9-25

问题原因

你代码的核心问题是对DOM属性的读取和赋值逻辑理解有误：

代码第一行let Eingabe = document.getElementById("eingabe").value; 是直接读取了input元素初始化时的value值，赋值给了Eingabe变量，这是值类型的拷贝，和原DOM元素没有关联
后续你修改Eingabe = userinput时，只是修改了这个普通变量的值，没有把新值回写到input元素的value属性上，所以页面不会同步更新

修正方案

把Eingabe改成存储DOM元素的引用，而非直接存初始值
每次更新内容时，显式给元素的value属性赋值

修正后的JS代码如下：

// 存储input元素引用，而非直接读value
const Eingabe = document.getElementById("eingabe");
const Eins = document.getElementById("ein");
const Zwei = document.getElementById("zwei");
let userinput = "";

console.log("bevor:", Eingabe.value);

Eins.addEventListener("click", function() {
  userinput = userinput + Eins.innerHTML
  // 把新值赋值给元素的value属性
  Eingabe.value = userinput;
  console.log(Eingabe.value);
})

Zwei.addEventListener("click", function() {
  userinput = userinput + Zwei.innerHTML;
  Eingabe.value = userinput;
  console.log(Eingabe.value);
})