如何用JavaScript绑定网页多按钮实现带延迟的页面过渡跳转？

核心问题分析 #

1. 语法错误：你提供的JavaScript代码存在语法缺失——forEach方法调用后缺少闭合的)，整个window.onload箭头函数也没写完，这会直接导致代码报错失效。
2. 选择器范围不全：原代码只选中了.homebuttonlink类的元素，没包含.homebuttonlink2，所以新加的按钮不会绑定点击事件。

修正后的完整代码 #

JavaScript部分

window.onload = () => {
  const transition_el = document.querySelector('.transition');
  // 同时选中两个类的按钮元素
  document.querySelectorAll('.homebuttonlink, .homebuttonlink2').forEach(element => {
    element.addEventListener('click', event => {
      event.preventDefault();
      const target = element.href; // 直接用element获取href更简洁
      
      transition_el.classList.add('is-active');

      setTimeout(() => {
        window.location.href = target;
      }, 500);
    });
  }); // 补上forEach的闭合括号和window.onload的闭合
};

HTML部分（包含两种类的按钮）

<a class="homebuttonlink" href="page1/#one">BUTTON1</a>
<a class="homebuttonlink2" href="page2/#two">BUTTON2</a>
<!-- 确保页面存在.transition元素 -->
<div class="transition"></div>

额外注意事项 #

• 确认.transition元素在HTML中存在，且.is-active类已配置好过渡动画的CSS样式，比如：

.transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.transition.is-active {
  opacity: 1;
  pointer-events: all;
}

• 如果点击后还是没反应，打开浏览器控制台（F12）查看是否有报错，比如找不到.transition元素的错误，针对性解决即可。

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