如何创建变量记录多输入框内容并追加为页面列表项？

问题分析 #

你的代码核心问题出在threeItems的定义和使用上：

• let threeItems = ("itemInput", "storeInput", "dateInput"); 这里用了逗号运算符，最终threeItems的值是字符串"dateInput"，不是输入框元素，自然没有value属性。
• 你需要在按钮点击时，实时获取三个输入框的当前值，再整合成列表项内容，而不是提前定义一个无效的变量。

修正后的代码 #

JavaScript 部分

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");

addButton.addEventListener("click", function() {
  // 获取三个输入框的当前值
  const item = itemInput.value.trim();
  const store = storeInput.value.trim();
  const date = dateInput.value.trim();

  // 简单校验，避免添加空项
  if (!item) return;

  // 整合内容，自定义显示格式
  const itemText = `商品：${item} | 商店：${store || "未指定"} | 日期：${date || "未指定"}`;
  
  // 创建列表项并添加到页面
  const newItem = document.createElement("li");
  newItem.innerText = itemText;
  listArea.appendChild(newItem);

  // 清空所有输入框
  itemInput.value = "";
  storeInput.value = "";
  dateInput.value = "";
});

HTML 部分（无需修改，保持原样即可）

<h1>Shopping List</h1>
<div class="inputArea">
  <div>
    <h3 id="item">item:</h3>
    <input type="text" id="item-input" placeholder="Add item here">
  </div>
  <div>
    <h3 id="store">Store:</h3>
    <input type="text" id="store-input" placeholder="e.g Costco, Superstore, etc.">
  </div>
  <div>
    <h3 id="date">Date</h3>
    <input type="text" id="date-input" placeholder="Add date for shopping run here">
  </div>
</div>
<br>
<div>
  <button id="submit">Submit</button>
</div>
<div id="list-container">
</div>

额外优化说明 #

• 添加了trim()去除输入内容的首尾空格，避免无效的空内容。
• 增加了简单校验，如果商品名称为空则不添加列表项。
• 用模板字符串${}拼接内容，格式更清晰易读，还处理了商店/日期为空的情况，显示"未指定"提示。

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