如何无需事件触发且不使用onload事件在页面加载时执行指定JavaScript函数

嘿，我懂你想要的效果——不用点按钮，也不用依赖onload事件，让折扣计算函数在页面刚加载的时候就自动跑起来对吧？这其实很简单，核心思路就是确保函数调用的时候，需要操作的DOM元素已经被浏览器解析出来了。

这里有两种实用的方案，你可以根据需求选：

方案1：直接在DOM元素后调用函数 #

把函数定义和调用放在所有相关HTML元素的后面，浏览器从上到下解析页面，当执行到函数调用时，前面的.Total、.DiscPrice和#demo都已经存在于DOM中了，完全可以正常获取内容并计算。

完整代码示例：

<div class="Total">5000</div>
<div class="DiscPrice">3000</div>
<div id="demo"></div>

<script>
function discount() {
  // 获取原价和折扣价
  var saadTotal = document.getElementsByClassName("Total")[0].innerHTML;
  var saad = document.getElementsByClassName("DiscPrice")[0].innerHTML;
  // 计算折扣比例，这里加了toFixed(2)让结果保留两位小数，看起来更规整
  var reed = ((saadTotal - saad) / saadTotal) * 100;
  reed = reed.toFixed(2);
  // 把结果插入到页面中
  document.getElementById("demo").innerHTML = reed + "% off";
}

// 直接调用函数，页面加载到这里时DOM已经准备就绪
discount();
</script>

方案2：使用立即执行函数（IIFE） #

如果你不想让discount函数暴露在全局作用域里，可以用立即执行函数表达式，定义完函数马上执行，同样能达到自动运行的效果：

<div class="Total">5000</div>
<div class="DiscPrice">3000</div>
<div id="demo"></div>

<script>
(function discount() {
  var saadTotal = document.getElementsByClassName("Total")[0].innerHTML;
  var saad = document.getElementsByClassName("DiscPrice")[0].innerHTML;
  var reed = ((saadTotal - saad) / saadTotal) * 100;
  reed = reed.toFixed(2);
  document.getElementById("demo").innerHTML = reed + "% off";
})(); // 这里的()就是让函数立即执行的关键
</script>

另外，你原来的按钮可以直接删掉啦，因为现在不需要点击触发了。如果想保留按钮做备用也没问题，只是它的onclick事件就派不上用场了。

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