Uncaught TypeError报错排查：视频点击切换样式功能实现求助

一、先搞定那个TypeError报错 #

这个报错99%的情况是你直接给元素集合调用了addEventListener方法，而不是单个DOM元素。比如你可能写了这样的代码：

const check = document.getElementsByClassName('check'); // 返回HTMLCollection（类数组）
check.addEventListener('click', ...); // 集合没有这个方法，所以报错！

解决办法很简单，遍历所有匹配的元素，给每个单独加监听：

// 获取所有视频元素（假设你的视频类是check）
const videos = document.querySelectorAll('.check'); // 用querySelectorAll更方便，返回NodeList

// 遍历每个视频添加点击监听
videos.forEach(video => {
  video.addEventListener('click', function() {
    // 这里写点击后的逻辑
  });
});

二、实现点击视频切换加宽的功能 #

接下来完成核心需求：点击当前视频加类加宽，其他视频自动移除这个类。假设加宽的类名叫wide-video，代码可以这么写：

const videos = document.querySelectorAll('.check');
const activeClass = 'wide-video';

videos.forEach(video => {
  video.addEventListener('click', function() {
    // 第一步：移除所有视频的active类
    videos.forEach(v => v.classList.remove(activeClass));
    // 第二步：给当前点击的视频添加active类
    this.classList.add(activeClass);
  });
});

三、CSS属性排查要点 #

如果加了类之后宽度没变化，检查这几个点：

• 确认你的wide-video类的CSS优先级足够，比如不要被更具体的选择器覆盖：

  /* 正确示例：确保优先级足够，直接针对视频元素 */
  .check.wide-video {
    width: 80%; /* 或者你想要的宽度值 */
    /* 可以再加过渡动画让切换更丝滑 */
    transition: width 0.3s ease;
  }
  

• 检查视频元素的父容器是否有固定宽度或者overflow: hidden限制，导致视频无法加宽
• 确认视频元素的display属性：如果是inline，宽度设置可能无效，改成block或inline-block/flex
• 检查是否有max-width属性限制了视频的最大宽度，需要同时调整max-width

完整示例代码 #

把这些整合起来，你的test.js应该是这样：

// 等DOM加载完成再执行（避免获取不到元素）
document.addEventListener('DOMContentLoaded', function() {
  const videos = document.querySelectorAll('.check');
  const activeClass = 'wide-video';

  videos.forEach(video => {
    video.addEventListener('click', function() {
      // 移除所有视频的active类
      videos.forEach(v => v.classList.remove(activeClass));
      // 给当前视频加类
      this.classList.add(activeClass);
    });
  });
});

CSS补充：

.check {
  width: 40%; /* 默认宽度 */
  display: block; /* 确保宽度生效 */
  margin: 10px 0;
  transition: width 0.3s ease;
}

.check.wide-video {
  width: 80%; /* 加宽后的宽度 */
}

这样应该就能解决你的报错，同时实现点击切换加宽的功能啦！

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