为何我的元素存在性检查在其他页面不生效，仍报空值错误？

你现在的判断逻辑完全没挡住报错，核心是三个问题叠加导致的：

• 第一是判断的检查对象完全错位
  你的代码里抛错的位置是给.js-element__buildOpenPopUp元素绑点击事件时，这个元素在其他页面根本不存在，document.querySelector返回了null，才会提示Cannot read property 'addEventListener' of null。但你写的条件判断，从头到尾都没检查这个按钮元素是否存在，反而去检查了和这个报错完全无关的popUp变量，自然拦不住错误。
• 第二是DOM API的使用本身有错误
  你写的document.getElementsByClassName(".js-popUp")本身就是无效查询：这个方法接收的参数是纯类名，不需要加类名选择器的点号，带着点号查永远匹配不到元素。更关键的是，就算查询不到任何元素，这个方法也会返回一个空的HTMLCollection，既不是undefined也不是null，所以你写的if (typeof popUp != "undefined" && popUp != null)判断永远会成立，完全起不到“元素存在才执行”的作用。
• 第三是回调内部的DOM操作同样没有做存在性校验
  就算绑事件的逻辑没报错，点击回调里取到的itemList如果是null，你直接读它的classList属性，还是会报同样类型的错。

修正后的实现逻辑 #

调整核心判断目标，把会抛错的DOM对象作为校验核心，查不到就直接终止逻辑，不要往下执行：

// 先获取打开弹窗的按钮，作为第一校验目标
const openPopUpBtn = document.querySelector(".js-element__buildOpenPopUp");
// 按钮不存在，直接终止所有后续逻辑，从根源避免空值报错
if (!openPopUpBtn) return;

openPopUpBtn.addEventListener("click", function () {
  // 回调里获取弹窗元素，同样先做存在校验
  const popUpEl = document.querySelector(".js-popUp");
  if (!popUpEl) return;

  const popUpItems = document.querySelectorAll(".js-popUp__itemList");
  if (popUpEl.classList.contains("hidden-block")) {
    addScrollableTarget(popUpItems);
    disablePageScroll();
  }
});

新手写这类DOM逻辑的通用避坑原则：只要是通过querySelector获取的元素，都没有100%的存在保障，必须拿到元素先判空，再去调它的属性、绑事件，不要直接链式写操作代码。

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