如何使用原生JavaScript根据商品数量动态更新对应总价

原有代码问题 #

• 价格计算逻辑仅在页面加载时执行一次，数量变化时未触发重新计算
• 单价、乘数均为硬编码值，未读取页面实际展示的$77.89作为计算基准
• 没有做金额格式化处理，不符合货币展示规范

修改思路 #

• 封装独立的价格更新函数，每次数量变动后自动调用
• 从页面元素提取原始单价，适配后续价格调整的场景
• 新增输入框可选监听，支持用户手动修改数量时自动校验和更新价格
• 金额计算后保留2位小数，和原有价格格式对齐

完整修改代码 #

JavaScript 代码（CSS、HTML无需改动） #

var count = 1;
var countEl = document.getElementById("num-count");
// 读取页面实际单价，移除硬编码
const basePrice = Number(document.getElementById("priceExtra").innerText.replace('$', ''));
const priceDisplayEl = document.getElementById("priceValueCount");

// 价格更新公用方法
function updatePrice() {
  const totalPrice = (basePrice * count).toFixed(2);
  priceDisplayEl.innerHTML = `$${totalPrice}`;
}

// 初始化页面加载时的价格展示
updatePrice();

function addCount() {
  if (count < 4) {
    count++;
    countEl.value = count;
    updatePrice();
  }
}

function minusCount() {
  if (count > 1) {
    count--;
    countEl.value = count;
    updatePrice();
  }
}

// 可选扩展：支持手动修改输入框数值
countEl.addEventListener('change', function() {
  let inputVal = Number(this.value);
  // 数值合法性校验
  if (isNaN(inputVal) || inputVal < 1) inputVal = 1;
  if (inputVal > 4) inputVal = 4;
  count = inputVal;
  this.value = count;
  updatePrice();
})

修改后即可实现需求：数量为2时总价自动计算为$155.78，数量调整时价格同步更新。

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