如何将name字段内容显示在只读<input>输出文本框中？

关键修正与实现说明： #

1. 修复重复ID问题：原代码里两个<input>用了相同的id="myText"，DOM中ID必须唯一，否则无法精准定位元素，需把只读输出框的ID改为output。
2. 使用正确属性控制输入框内容：<input>这类表单元素的显示内容由value属性管理，而非innerHTML（innerHTML用于修改元素的HTML结构内容）。

修改后的完整代码： #

HTML 部分：

<!DOCTYPE html>
<html>

<body style="text-align:center;">
  <h1 style="color:green;">

  </h1>
  <h2>Text value property</h2>
  <p>
    Change the text of the text field, and then click the button below.
  </p>

  Name:<input type="text" id="myText" value="Mickey">
  <button type="button" onclick="myFunction()">Try it</button>
  <p id="demo"></p>

  Output:<input type="text" id="output" readonly>
</body>

</html>

JavaScript 部分：

function myFunction() {
  // 获取输入框的内容
  var inputValue = document.getElementById("myText").value;
  // 将内容赋值给只读输出框
  document.getElementById("output").value = inputValue;
  // 保留原有的innerHTML展示（不需要可删除此行）
  document.getElementById("demo").innerHTML = inputValue;
}

点击按钮后，输入框的内容会同步到只读的output文本框中，同时保留了原<p id="demo">区域的内容展示（按需保留或删除即可）。

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