本文详解如何通过原生 javascript 获取多个文本框的输入值，并将其结构化展示在页面另一区域的 div 中，重点纠正 id 选择器误用、html/css 选择器不一致等常见错误，提供可直接运行的完整示例。
本文详解如何通过原生 javascript 获取多个文本框的输入值，并将其结构化展示在页面另一区域的 div 中，重点纠正 id 选择器误用、html/css 选择器不一致等常见错误，提供可直接运行的完整示例。
在实际开发中，常需将用户在表单中填写的信息实时汇总并展示于指定区域。但初学者容易混淆 getElementById() 与类选择器（.class）的用法，导致脚本无法正确获取或更新 DOM 元素。核心问题通常有两个：一是 HTML 中使用 class 属性定义元素，却在 JavaScript 中错误调用 document.getElementById()；二是 CSS 中用类名（如 .float-child2）定义样式，而 JS 却试图通过 id 查找——二者必须严格匹配。
✅ 正确做法是：统一使用 id 作为唯一标识符进行 DOM 操作。以下为优化后的完整实现：
✅ HTML 结构（使用 id 替代 class 用于 JS 定位）
<div class="float-container">
<div id="float-child">
<label>First Name:</label><input title="FirstName" id="txtFname"><br><label>Last Name:</label><input title="lastName" id="txtLname"><br><label>Age:</label><input title="age" id="txtage"><br><label>Email Address:</label><input title="Email" id="txtemail"><br><button onclick="onTransfer()">Transfer</button>
</div>
<div id="float-child2"></div>
</div>
✅ CSS 样式（对应修改为 ID 选择器）
.float-container {
border: 3px solid #fff;
padding: 20px;
width: 100%;
height: auto; /* 推荐改为 auto，避免高度塌陷 */
overflow: hidden; /* 清除浮动影响 */
}
#float-child {
width: 48%;
float: left;
padding: 20px;
border: 2px solid red;
}
#float-child2 {
width: 46%;
float: right;
padding: 20px;
border: 2px solid red;
min-height: 120px; /* 确保内容区有基础高度 */
}
✅ JavaScript 逻辑（精准提取 & 格式化输出）
function onTransfer() {
// 获取各输入框的值（注意：.value 而非 .innerHTML）
const fname = document.getElementById('txtFname').value || 'N/A';
const lname = document.getElementById('txtLname').value || 'N/A';
const age = document.getElementById('txtage').value || 'N/A';
const email = document.getElementById('txtemail').value || 'N/A';
// 构建结构化 HTML 内容（避免直接复制 input 元素，防止重复交互）
const displayHTML = `
<h3>User Summary:</h3>
<p><strong>Full Name:</strong> ${fname} ${lname}</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java"><img
src="https://img.php.cn/upload/skill/000/000/081/178955835420587.jpg" alt="Alibabacloud Sdk Client Initialization For Java" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java" class="overflowclass">Alibabacloud Sdk Client Initialization For Java</a>
<p class="overflowclass">在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p><strong>Age:</strong> ${age}</p>
<p><strong>Email:</strong> ${email}</p>
`;
// 更新目标容器
document.getElementById('float-child2').innerHTML = displayHTML;
}
⚠️ 关键注意事项：
- 不要用 innerHTML 复制整个 ：原代码 document.getElementById('float-child').innerHTML 会把所有 input 元素（含未填值）一并复制过去，导致新区域出现可编辑框，且按钮重复渲染，违背“只显示结果”的设计意图。
- 务必使用 .value 获取输入值： 元素的内容存储在 value 属性中，而非 innerHTML。
- 添加空值兜底（|| 'N/A'）：防止用户未填写时显示 undefined 或空白。
- CSS 清除浮动：.float-container 添加 overflow: hidden 或使用 ::after 伪元素清除浮动，确保父容器正确包裹子元素。
- 语义化与可维护性：建议将 onclick 事件从 HTML 中解耦，改用 addEventListener（如下），提升代码可读性与复用性：
document.getElementById('btnTransfer').addEventListener('click', onTransfer);通过以上调整，即可用纯 HTML + CSS + JavaScript 实现安全、清晰、可维护的表单数据展示功能，无需任何第三方库。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
