如何让文字打乱JavaScript脚本在页面加载时触发而非鼠标悬停？

原代码的问题在于直接将onmouseover改为onload无效——普通HTML元素（如h1）并不支持onload事件，而且未确保元素在脚本执行时已被DOM加载完成。以下是修改后的实现方案：

修改后的代码 #

JavaScript 部分 #

const letters = "ABCDEFGHKLMNOPQRSTUVWXYZ";
let interval = null;

// 封装文字打乱逻辑为独立函数
function scrambleText(element) {
  let iteration = 0;

  clearInterval(interval);

  interval = setInterval(() => {
    element.innerText = element.innerText
      .split("")
      .map((letter, index) => {
        if (index < iteration) {
          return element.dataset.value[index];
        }
        // 用letters.length替代固定数值20，适配字母表长度
        return letters[Math.floor(Math.random() * letters.length)];
      })
      .join("");

    if (iteration >= element.dataset.value.length) {
      clearInterval(interval);
    }

    iteration += 1 / 2;
  }, 6);
}

// 监听文档加载完成事件，执行打乱逻辑
document.addEventListener('DOMContentLoaded', () => {
  const targetElement = document.querySelector("h1#scramble");
  if (targetElement) {
    scrambleText(targetElement);
  }
});

HTML 部分 #

<h1 id="scramble" data-value="Hello">Helloword</h1>

关键修改说明 #

• 将鼠标悬停触发的逻辑封装为独立函数scrambleText，方便复用和调用
• 使用DOMContentLoaded事件确保脚本在DOM完全加载后执行，避免找不到目标元素的问题
• 替换原代码中固定的随机数范围20为letters.length，避免数组越界并充分使用定义的字母表

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