使用平行数组搭配HTML选择框时新增条目覆盖已有内容问题求助

• 每次调用getTotal函数时，你都重新初始化了output变量为全新的<ul>字符串，最后直接赋值覆盖#results元素的原有内容，自然会把之前的提交记录全部替换
• 代码中的totalPrice变量只做了初始化，没有实际累加选中商品的金额，也没有保留历史提交的总价数据
• 缺少对输入数量的合法性校验，可能出现非数字、负数值等异常情况

调整JS逻辑，把历史提交的累计总价和已选商品列表做持久化存储，每次新提交时向已有内容追加而不是覆盖，同时补充数值校验逻辑。

修复后完整JS代码 #

// 全局变量存储累计总价和已有的列表容器引用
let totalPrice = 0;
let listContainer = null;

function getTotal() {
  const products = ["Umbrella", "Rain coat", "Swimsuit"];
  const prices = [14.95, 119.99, 40.00];
  const boxes = document.forms.myform.item.options;
  const quantity = parseInt(document.myform.quantity.value.trim());

  // 数量合法性校验
  if (isNaN(quantity) || quantity <= 0) {
    alert("请输入有效的正整数数量");
    return false;
  }

  // 第一次运行时初始化列表容器
  if (!listContainer) {
    listContainer = document.createElement("ul");
    document.getElementById("results").appendChild(listContainer);
  }

  // 遍历选中商品，追加条目、累加总价
  for (let i = 0; i < products.length; i++) {            
    if (boxes[i].selected) {
      const itemCost = prices[i] * quantity;
      // 新建li元素追加到已有列表里
      const listItem = document.createElement("li");
      listItem.textContent = `${products[i]} (数量 ${quantity}) 价格: ${itemCost.toFixed(2)}`;
      listContainer.appendChild(listItem);
      // 累加总价
      totalPrice += itemCost;
    }
  }

  // 更新总价显示
  document.getElementById("totalprice").textContent = `总价: ${totalPrice.toFixed(2)}`;
  // 提交后清空数量输入框，方便下次输入
  document.myform.quantity.value = '';
  // 阻止表单默认提交跳转行为
  return false;
}

HTML小调整 #

把原有form标签的提交属性修改为如下形式，避免表单默认跳转的潜在问题，其余HTML代码无需改动：

<form name="myform" onsubmit="return getTotal()">

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