如何从表单获取文本值并通过alert弹窗、innerHTML分别输出展示

你的现有代码存在两个核心逻辑错误：

• 直接选中#fname、#lname两个输入框元素修改innerHTML，会把输入框本身替换成文本，导致后续无法继续输入内容
• 没有专门的输出容器，渲染目标不符合需求

修正后的代码实现 #

HTML部分

新增专门用来展示结果的容器即可，原有表单、alert按钮逻辑不需要改动：

<form>
  <label>姓名 :</label><input type="text" id="fname"> <br>
  <label>姓氏 :</label><input type="text" id="lname"> <br>
</form>
<!-- 新增结果展示容器 -->
<div id="result"></div>

<button onclick="htmlText()">渲染到页面</button>
<button onclick="window.alert(alertText())">弹出提示</button>

JS部分

仅修改htmlText函数的渲染目标即可，原有alertText函数可以直接复用：

function htmlText() {
  document.getElementById("result").innerHTML = alertText();
}

function alertText() {
  return "你的姓名是: " +
    document.getElementById("fname").value + " " +
    document.getElementById("lname").value + ".";
}

修改后点击「渲染到页面」按钮就会把表单输入的内容直接展示在表单下方的区域，不会影响原有输入框的正常使用。

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