使用JavaScript实现添加产品功能时输出异常，求协助排查修复

我帮你排查了代码里的几个关键问题，这些就是导致输出结果不正确的原因：

• 价格值未实时更新：你在页面加载时就获取了price和price2的初始值，但用户后续修改输入框价格时，这两个变量不会同步更新，计算时始终用的是旧价格。
• 计数器共用冲突：两个添加按钮的函数共用同一个全局变量i，不管点哪个按钮i都会累加，两种产品的数量混在一起，结果自然出错。
• 字符串转数字隐患：输入框的value是字符串类型，虽然JS会自动转换，但遇到空值或非数字输入时，会出现NaN这类错误结果。
• 代码格式不严谨：比如i++后面未加分号，虽然JS允许，但容易引发奇怪的语法问题。

修复后的代码（合计两种产品总价场景） #

// 先获取显示总价的元素
const totalElement = document.getElementById('total');
// 给两种产品设置独立计数器，避免互相干扰
let product1Count = 0;
let product2Count = 0;

// 产品1添加逻辑
function addProduct1() {
  product1Count++;
  // 实时读取最新价格，转数字后处理异常输入（空值/非数字默认用0）
  const price1 = Number(document.getElementById('price').value) || 0;
  updateTotalPrice();
}

// 产品2添加逻辑
function addProduct2() {
  product2Count++;
  const price2 = Number(document.getElementById('price2').value) || 0;
  updateTotalPrice();
}

// 单独提取总价计算函数，避免重复代码
function updateTotalPrice() {
  const price1 = Number(document.getElementById('price').value) || 0;
  const price2 = Number(document.getElementById('price2').value) || 0;
  const total = product1Count * price1 + product2Count * price2;
  totalElement.textContent = total; // 用textContent比innerHTML更安全，避免XSS风险
}

如果需要分别显示每种产品的总价 #

可以先在HTML里新增两个显示元素：

<ul>
  <li>产品1总价：<span id="product1Total"></span></li>
  <li>产品2总价：<span id="product2Total"></span></li>
  <li class="total pull-right">总总价：<span id="total"></span></li>
</ul>

再修改JS代码：

const product1TotalEl = document.getElementById('product1Total');
const product2TotalEl = document.getElementById('product2Total');
const totalElement = document.getElementById('total');

let product1Count = 0;
let product2Count = 0;

function addProduct1() {
  product1Count++;
  const price1 = Number(document.getElementById('price').value) || 0;
  const product1Total = product1Count * price1;
  product1TotalEl.textContent = product1Total;
  updateTotalPrice();
}

function addProduct2() {
  product2Count++;
  const price2 = Number(document.getElementById('price2').value) || 0;
  const product2Total = product2Count * price2;
  product2TotalEl.textContent = product2Total;
  updateTotalPrice();
}

function updateTotalPrice() {
  const price1 = Number(document.getElementById('price').value) || 0;
  const price2 = Number(document.getElementById('price2').value) || 0;
  const total = product1Count * price1 + product2Count * price2;
  totalElement.textContent = total;
}

关键修复点说明 #

1. 独立计数器：拆分全局变量i为product1Count和product2Count，每种产品的数量单独统计，不会互相干扰。
2. 实时获取价格：每次点击按钮时才读取输入框的最新值，确保计算用的是用户当前设置的价格。
3. 安全的类型转换：用Number()转换字符串为数字，加|| 0处理异常输入，避免出现NaN。
4. 替换innerHTML为textContent：仅显示纯文本时，textContent更安全，能避免潜在的XSS攻击风险。

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