JavaScript实现用户输入价格累加存储及输出问题求助

现存问题 #

你的代码存在几个关键问题导致无法实现需求：

• 无触发逻辑：代码仅在页面加载时执行一次，不会响应后续的价格输入操作
• 变量作用域错误：sum数组每次执行都会重新创建，无法保留之前录入的价格
• DOM操作错误：错误地将获取到的DOM元素outputSumme直接赋值为数值，应该修改其value属性来更新页面显示
• 缺少求和逻辑：仅将当前价格存入数组，未计算累加总和

修复后的完整代码 #

HTML代码

<input type="number" id="myInput2" placeholder="输入商品价格" />
<button id="addBtn">添加价格并求和</button>
<input type="text" id="summe" readonly placeholder="总价显示" />

JavaScript代码

// 全局变量存储价格数组，避免每次触发时重新初始化
const priceList = [];
// 获取DOM元素
const priceInput = document.getElementById("myInput2");
const sumOutput = document.getElementById("summe");
const addBtn = document.getElementById("addBtn");

// 绑定按钮点击事件，触发添加和求和逻辑
addBtn.addEventListener("click", () => {
  // 获取输入值并转为浮点数
  const currentPrice = parseFloat(priceInput.value);
  // 校验输入是否为有效数字
  if (!isNaN(currentPrice) && currentPrice > 0) {
    // 将价格存入数组
    priceList.push(currentPrice);
    // 计算累加总和
    const totalSum = priceList.reduce((acc, price) => acc + price, 0);
    // 更新页面显示
    sumOutput.value = totalSum.toFixed(2); // 保留两位小数
    // 在控制台打印数组和总和
    console.log("已录入价格列表:", priceList);
    console.log("当前总价:", totalSum);
    // 清空输入框，方便下次输入
    priceInput.value = "";
  } else {
    alert("请输入有效的正数价格");
  }
});

// 可选：支持回车键触发添加操作
priceInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    addBtn.click();
  }
});

关键逻辑说明 #

• 全局数组存储：priceList放在事件监听外部，确保每次添加价格时都能保留历史数据
• 事件触发：通过按钮点击或回车键触发添加操作，响应用户输入
• 输入校验：判断输入是否为有效正数，避免无效值干扰计算
• 求和计算：使用reduce方法快速计算数组中所有价格的累加和
• 页面更新：修改sumOutput.value来更新总价显示，同时保留两位小数提升可读性
• 用户体验优化：添加输入完成后清空输入框的逻辑，支持回车键触发

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