如何使用JavaScript获取表单用户数据并在页面展示

你的代码存在的问题 #

• 变量名大小写不匹配：定义的是fName，但调用时写了FName，会导致未定义错误
• 使用document.write会覆盖整个页面，无法在指定区域展示数据
• 两个表单同名data，会导致DOM元素获取混乱
• 展示数据的<span>使用name属性，不如id更适合精准获取元素
• HTML存在语法错误：按钮后多余的function文本、第二个表单未闭合

修正后的完整代码 #

HTML部分 #

<div class="user-info">
  <span class="line">
    <h2><span>User Info</span></h2>
  </span>
  <form name="inputForm">
    <table>
      <tr>
        <td>First Name</td>
        <td><input type="text" name="fName"></td>
      </tr>
      <tr>
        <td>Last Name</td>
        <td><input type="text" name="lName"></td>
      </tr>
      <tr>
        <td>Address</td>
        <td><input type="text" name="address"></td>
      </tr>
      <tr>
        <td></td>
        <td><button type="button" onclick="show()">Show</button></td>
      </tr>
    </table>
  </form>
</div>

<h1 align="center">Your Output Is Here</h1>
<div class="user-info">
  <span class="line">
    <h2><span>User Info</span></h2>
  </span>
  <div>
    <table class="second-table">
      <tr>
        <td>Your First Name:<span id="showFName"></span></td>
      </tr>
      <tr>
        <td>Your Last Name:<span id="showLName"></span></td>
      </tr>
      <tr>
        <td>Your Address:<span id="showAddress"></span></td>
      </tr>
    </table>
  </div>
</div>

JavaScript部分 #

function show(){            
  // 获取表单输入值
  var fName = document.inputForm.fName.value;
  var lName = document.inputForm.lName.value;
  var address = document.inputForm.address.value;
  
  // 将值插入到对应的展示区域
  document.getElementById('showFName').textContent = fName;
  document.getElementById('showLName').textContent = lName;
  document.getElementById('showAddress').textContent = address;
}

关键改动说明 #

• 把第一个表单名改为inputForm，避免和展示区域的容器（直接换成div，无需表单）重复
• 展示区域的span改用id属性，方便通过getElementById精准定位
• 替换document.write为textContent赋值，在指定位置展示数据，不会覆盖页面
• 修正变量名大小写问题，确保调用和定义一致
• 修复HTML语法错误，移除多余文本并闭合标签

内容的提问来源于stack exchange，提问作者md Joynal Abedin