JS开发交互按钮时，设置style.zIndex后后续代码中断失效

代码走到zIndex赋值行就中断，核心原因是首次点击按钮时，全局变量prevPage是未初始化的undefined。
执行prevPage.style.zIndex = "0"时，JS会尝试读取undefined对象的style属性，直接抛出Uncaught TypeError: Cannot set properties of undefined的运行时错误，未捕获的JS错误会立刻打断当前执行栈，这就是为什么该行之后的alert、clearPrevPage调用完全不执行。
同理，clearPrevPage的定时回调里，访问prevPage.style.left时，也会因为首次执行prevPage为空触发同类报错。 #

• 所有操作prevPage属性的位置，增加非空判断，首次运行时跳过针对旧页面的逻辑

// 调整层级位置的判断
if (prevPage) {
  prevPage.style.zIndex = "0";
}
currentPage.style.zIndex = "1";

// 定时回调里的判断
if (prevPage) {
  prevPage.style.left = "100vw";
}

• 可选优化：

1. 页面加载完成后，手动把默认展示的页面元素赋值给prevPage，提前配置好初始zIndex、left定位值，避免首次滑动动画异常
2. 给所有内容页加position: absolute基础定位，确保zIndex、left属性能正常生效

• 修复后的核心代码参考：

var menuButtons = document.getElementsByClassName("menuButton");
var pageButtons = document.getElementsByClassName("pageButton");
var i;
var prevPage;
var currentPage;

for (i = 0; i < pageButtons.length; i++) {
  pageButtons[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var pageId = this.getAttribute("pageTarget");
    currentPage = document.getElementById(pageId);
    // 仅在存在旧页面时调整层级
    if (prevPage) {
      prevPage.style.zIndex = "0";
    }
    currentPage.style.zIndex = "1";
    currentPage.style.left = "100vw";
    alert("button clicked");
    clearPrevPage();
  });
};

function clearPrevPage() {
  setTimeout(function() {
    // 仅在存在旧页面时调整位置
    if (prevPage) {
      prevPage.style.left = "100vw";
    }
    prevPage = currentPage;
    alert("delayed");
  }, 400);
};

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