document.getElementById获取carousel返回null，点击触发TypeError错误求助

问题核心原因 #

1. DOM未完全加载时执行元素查询：脚本执行时目标DOM元素还未被解析，导致document.getElementById("carousel_id")返回null。
2. 重复绑定点击事件：按钮#next同时通过HTML的onclick和JS的addEventListener绑定事件，触发时会执行两次逻辑导致索引异常。
3. 参数传递错误：updateClick函数调用slideVideo(videoIndex)，但slideVideo未定义参数，会干扰内部索引逻辑。
4. 未声明的全局变量：videos和buttons未用let/const声明，会变成全局变量引发潜在冲突。

修正方案 #

1. 修改JavaScript代码

将所有DOM操作逻辑包裹在DOMContentLoaded事件中，确保DOM完全加载后再执行，并修复参数与变量问题：

document.addEventListener('DOMContentLoaded', function() {
  function toggleVideoSection(showVideo) {
    const wrapper = document.querySelector(".wrapper");
    wrapper.style.display = showVideo ? "flex" : "none";
  }

  let videoIndex = 0;
  const videos = document.querySelectorAll("video");
  const buttons = document.querySelectorAll(".button");
  const wrapper = document.querySelector(".wrapper");
  const carousel = document.getElementById("carousel_id");

  function slideVideo() {
    // 修正索引边界判断
    videoIndex = videoIndex >= videos.length ? 0 : videoIndex < 0 ? videos.length - 1 : videoIndex;
    carousel.style.transform = `translate(-${videoIndex * 100}%)`;
    console.log("hello");
  };

  const updateClick = (e) => {
    videoIndex += e.target.id === "next" ? 1 : -1;
    slideVideo(); // 移除多余参数传递
  };

  buttons.forEach((button) => button.addEventListener("click", updateClick));
});

2. 修改HTML按钮代码

移除onclick属性，避免重复触发事件：

<i class="fa-solid fa-arrow-right button" id="next"></i>

3. 额外优化建议

• 重命名包含空格和特殊字符的视频文件（如arab-men.mp4 human - Trim.mp4改为arab-men-human-trim.mp4），避免路径解析错误。
• 确保.carousel元素设置了overflow: hidden和合适的宽度，保证平移效果正常显示。

内容的提问来源于stack exchange，提问作者Mohammed Abdul Sattar Khan