如何修复点击退出按钮触发的Cannot read properties of null错误？

问题详情 #

• 触发场景：点击退出按钮时触发该错误
• 错误信息：第189行出现Cannot read properties of null (reading 'querySelectorAll')，指向代码行wrappers = container.querySelectorAll(".wrap");
• 按钮预期功能：点击蓝色播放按钮后移除播放器

相关代码 #

当前removePlayerHandler函数 #

function removePlayerHandler(evt) {
  const el = evt.target;
  let container = el.closest(".container");
  let wrappers;
  if (container) { //if multiple players
    wrappers = container.querySelectorAll(".remove .wrap");
  } else { //if single player
    container = el.closest(".remove");
    wrappers = container.querySelectorAll(".wrap");
  }
  wrappers.forEach(function (wrapper) {
    if (wrapper.player) {
      removePlayer(wrapper);
    }
  });
}

旧版removePlayerHandler函数 #

function removePlayerHandler(evt) {
  const el = evt.target;
  const container = el.closest(".container");
  const wrapper = container.querySelector(".wrap");
  if (wrapper.player) {
    return removePlayer(wrapper);
  }
}

相关HTML #

<div class="button-container">
<button class="exit" type="button"></button>
<button class="exit exitpPage2" type="button"></button>
<button class="exit exitpPage3" type="button"></button>
</div>

修复方案 #

错误根源是**container可能为null**：当退出按钮的DOM结构既找不到.container也找不到.remove父元素时，container会变成null，此时调用querySelectorAll就会抛出错误。

修改后的removePlayerHandler函数：

function removePlayerHandler(evt) {
  const el = evt.target;
  let container = el.closest(".container");
  let wrappers = []; // 初始化空数组，避免forEach报错
  if (container) { // 多播放器场景
    wrappers = container.querySelectorAll(".remove .wrap");
  } else { // 单播放器场景
    container = el.closest(".remove");
    // 先检查container是否存在，再调用querySelectorAll
    if (container) {
      wrappers = container.querySelectorAll(".wrap");
    }
  }
  wrappers.forEach(function (wrapper) {
    if (wrapper.player) {
      removePlayer(wrapper);
    }
  });
}

修复逻辑说明 #

1. 初始化wrappers为空数组，确保即使没有找到任何容器，forEach也能正常执行（空数组的forEach不会触发报错）
2. 在单播放器分支中增加container存在性判断，仅当container不为null时才调用querySelectorAll
3. 彻底避免因container为null而触发的属性读取错误

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