实现HTML视频播放完成前隐藏Next按钮的功能

你的代码存在几个关键问题导致功能失效，以下是具体修复方案：

1. 元素选择器错误 #

document.getElementsByClassName()返回的是HTMLCollection（类数组对象），并非单个DOM元素，直接访问div.style会抛出错误。改用document.querySelector()可直接获取匹配的第一个元素，更简洁可靠：

// 原代码
const div = document.getElementsByClassName("tutor-single-course-content-next");
div.style.visibility = "visible";

// 修改后
const nextBtnContainer = document.querySelector(".tutor-single-course-content-next");
nextBtnContainer.style.visibility = "visible";

2. CSS属性大小写问题 #

CSS属性名规范为小写，虽然部分浏览器兼容大写，但为避免潜在问题，修正你的CSS：

/* 原代码 */
.tutor-single-course-content-next{ Visibility: hidden; }

/* 修改后 */
.tutor-single-course-content-next{ visibility: hidden; }

3. 确保DOM加载完成后执行JS #

如果JS代码放在页面头部，会出现找不到video或按钮元素的情况。需将代码包裹在DOMContentLoaded事件中，或是放在<body>标签末尾：

document.addEventListener('DOMContentLoaded', () => {
  const video = document.querySelector('video');
  const nextBtnContainer = document.querySelector(".tutor-single-course-content-next");

  video.addEventListener('ended', () => {
    nextBtnContainer.style.visibility = "visible";
  });
});

优化方案：用类名切换替代直接修改样式 #

推荐通过添加/移除类名控制显示，更符合样式与逻辑分离的原则，也方便后续调整样式：

.tutor-single-course-content-next {
  visibility: hidden;
}
.tutor-single-course-content-next.visible {
  visibility: visible;
}

// 视频结束时添加类名
nextBtnContainer.classList.add('visible');

完整可运行代码示例：

<video src="你的视频文件地址.mp4" controls></video>

<div class="tutor-single-course-content-next">
  <a class="tutor-btn tutor-btn-secondary tutor-btn-sm" href="yield4learning.co.uk/courses/bank-guarantee/lesson/lesson-7">
    <span class="tutor-mr-8">Next</span>
    <span class="tutor-icon-next" aria-hidden="true"></span>
  </a>
</div>

<style>
.tutor-single-course-content-next {
  visibility: hidden;
}
.tutor-single-course-content-next.visible {
  visibility: visible;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const video = document.querySelector('video');
  const nextBtnContainer = document.querySelector(".tutor-single-course-content-next");

  video.addEventListener('ended', () => {
    nextBtnContainer.classList.add('visible');
  });
});
</script>

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