本文教你如何正确获取多个输入框的值，将其拼接为一条字符串，并在点击按钮时动态添加到页面列表中，避免常见误区（如误将字符串数组当作可读取 `.value` 的对象）。
在构建购物清单这类表单应用时，一个典型需求是：将“商品名”“商店名”“日期”三个输入框的内容合并为一条结构化记录，并实时追加到页面列表底部。初学者常犯的错误是——像 let threeItems = ("itemInput", "storeInput", "dateInput"); 这样直接用逗号分隔变量名，这在 JavaScript 中只是返回最后一个表达式的值（即 "dateInput"），且未关联 DOM 元素，更无法访问 .value。
正确的做法是：在事件触发时（如点击按钮），动态读取各输入框当前的 .value，再进行拼接。以下是优化后的核心逻辑：
let itemInput = document.getElementById("item-input");
let storeInput = document.getElementById("store-input");
let dateInput = document.getElementById("date-input");
let listArea = document.getElementById("list-container");
let addButton = document.getElementById("submit");
// ✅ 正确：存储输入框的 ID 字符串数组（便于复用）
const inputIds = ["item-input", "store-input", "date-input"];
addButton.addEventListener("click", function() {
// ✅ 动态获取每个输入框的当前值
const values = inputIds.map(id => document.getElementById(id).value.trim());
// ✅ 拼接为一行（用短横线分隔，也可改用逗号、制表符等）
const listItemText = values.join(" — ");
// ✅ 创建并插入新列表项
const newItem = document.createElement("li");
newItem.textContent = listItemText; // 推荐用 textContent 而非 innerText（更安全、性能更好）
listArea.appendChild(newItem);
// ✅ 清空所有输入框
inputIds.forEach(id => document.getElementById(id).value = "");
});⚠️ 关键注意事项：
- 不要在事件监听器外预先“缓存” .value（如 let threeItems = itemInput.value），因为此时输入框还是空的；
- 使用 trim() 去除用户无意输入的首尾空格，提升数据质量；
- 避免使用 innerText（受 CSS 影响且性能较低），优先选择 textContent；
- 若需更健壮的体验，可添加空值校验（例如跳过空字段或提示必填）：
const filteredValues = values.filter(v => v !== ""); const listItemText = filteredValues.length ? filteredValues.join(" — ") : "请填写至少一项";
通过这种“延迟读取 + 数组映射 + 字符串拼接”的模式，你不仅能解决当前问题，还能轻松扩展为支持任意数量输入字段的通用表单收集逻辑。
