如何不通过事件触发执行JS函数 让使用this的折扣方法页面加载自动运行

解决方案 #

你不需要修改原有discount函数的逻辑，只要在页面DOM加载完成后，获取所有需要计算折扣的.seen元素，逐个传入discount函数执行即可实现自动计算：

把以下代码添加到你现有JS代码的末尾即可：

document.addEventListener('DOMContentLoaded', function() {
  // 选中所有.seen元素
  document.querySelectorAll('.seen').forEach(function(seenEl) {
    // 跳过已单独处理的第一个带TotalPrice1的元素，也可以结合优化方案全量适配
    if (seenEl.querySelector('.TotalPrice')) {
      discount(seenEl);
    }
  });
});

可选优化：合并冗余逻辑 #

你现有的两个折扣计算函数逻辑完全重复，完全可以合并为一个通用函数，适配任意数量的折扣模块，无需维护多套代码，也不需要额外绑定点击事件：

// 通用印度卢比价格格式化方法
const parseRupee = (priceStr) => Number(priceStr.replace(/₹|,/gi, ''));

// 通用折扣计算函数
function calcDiscount(seenEl) {
  const total = parseRupee(seenEl.querySelector('[class^="TotalPrice"]').innerHTML);
  const disc = parseRupee(seenEl.querySelector('[class^="DiscPrice"]').innerHTML);
  const discountPercent = ((total - disc) / total) * 100;
  seenEl.querySelector('[class^="demo"]').innerHTML = discountPercent.toFixed(0) + "% off";
}

// 页面加载完成后自动计算所有模块折扣
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.seen').forEach(calcDiscount);
});

替换掉你原有写的discount1、discount两个函数和对应的调用代码即可，后续新增同类折扣模块只要按现有HTML结构编写，不用写额外JS就能自动计算折扣。

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