如何创建跳转随机页面的按钮？修改href实现点击跳转遇阻如何解决

场景1：按钮为<a>标签（示例结构：<a id="lucky_btn" href="#">试试手气</a>） #

document.addEventListener("DOMContentLoaded", function(){
  // 页面列表可根据实际文件命名调整，此处已补全about_me的.html后缀
  const arrayofpages = ["my_cat.html","about_me.html","art.html","index.html"];
  const luckyBtn = document.getElementById("lucky_btn");
  // 提前设置按钮文字，无需每次点击重复赋值
  luckyBtn.innerHTML = "random page";

  // 点击事件绑定到按钮本身，而非整个文档
  luckyBtn.addEventListener("click",function(){
    // 每次点击重新生成随机页面地址，保证每次点击结果随机
    const randompage = arrayofpages[Math.floor(Math.random()*arrayofpages.length)];
    // 模板字符串需用反引号包裹才能解析变量插值
    this.href = `${randompage}`;
  });
});

场景2：按钮为<button>标签（示例结构：<button id="lucky_btn">试试手气</button>） #

<button>没有原生href属性，直接通过location跳转即可：

document.addEventListener("DOMContentLoaded", function(){
  const arrayofpages = ["my_cat.html","about_me.html","art.html","index.html"];
  const luckyBtn = document.getElementById("lucky_btn");
  luckyBtn.innerHTML = "random page";

  luckyBtn.addEventListener("click",function(){
    const randompage = arrayofpages[Math.floor(Math.random()*arrayofpages.length)];
    window.location.href = randompage;
  });
});

原代码存在的问题 #

• 变量插值语法错误：${randompage}是ES6模板字符串语法，必须用反引号`包裹才能解析变量，原代码用普通双引号包裹，会直接把字符串${randompage}作为href值，无法指向正确页面
• 随机逻辑位置错误：原代码把随机页面计算放在DOMContentLoaded回调里，页面加载完成后只会生成一次随机地址，后续所有点击都跳转到同一个固定页面，无法实现每次点击随机跳转的效果
• 事件绑定范围错误：原代码把点击事件绑定在整个document对象上，点击页面任意位置都会触发修改按钮属性的逻辑，不符合功能预期
• 潜在路径错误：原页面列表里的about_me缺少.html后缀，可能会导致跳转404，可根据实际文件命名调整
• 冗余DOM查询：原代码每次触发点击事件都会两次查询DOM获取lucky_btn元素，提前缓存元素可提升性能

内容的提问来源于stack exchange，提问作者kb-95