JS will not run past set style.zIndex

I am trying to set up button elements. There are 2 scripts to get each button type and either run a simple collapse menu, or run a complicated collapse where slides 1 div over another after shifting depths. Everything seems to work except the depth (zindex) switch, and when the depth switch is implemented it stops running anything past the depth switch. Here is the script in question.

/* get all menu and page buttons */
var menuButtons = document.getElementsByClassName("menuButton");
var pageButtons = document.getElementsByClassName("pageButton");
/* working array index */
var i;
/* id of previous and current content pages */
var prevPage;
var currentPage;
/* when page button is clicked, set prevPage to lowest depth, then slide new page overtop */
for (i = 0; i < pageButtons.length; i++) {
  pageButtons[i].addEventListener("click", function() {
    this.classList.toggle("active");
    /* get refrence to target page of button */
    var pageId = this.getAttribute("pageTarget");
    currentPage = document.getElementById(pageId);
    /* set content page depths */
    prevPage.style.zIndex = "0";
    currentPage.style.zIndex = "1";
    /* set left position to start page transition */
    currentPage.style.left = "100vw";
    alert("button clicked");
    /* trigger delayed function to clear last page */
    clearPrevPage();
  });
};
/* delayed function transitions prevPage to starting position */
function clearPrevPage() {
  setTimeout(function() {
    prevPage.style.left = "100vw";
    /* set page variable for next run */
    prevPage = currentPage;
    alert("delayed");
  }, 400);
};

Answer

You are trying use prevPage before it was populated. A simple check if it’s not empty should fix it:

/* get all menu and page buttons */
var menuButtons = document.getElementsByClassName("menuButton");
var pageButtons = document.getElementsByClassName("pageButton");
/* working array index */
var i;
/* id of previous and current content pages */
var prevPage;
var currentPage;
/* when page button is clicked, set prevPage to lowest depth, then slide new page overtop */
for (i = 0; i < pageButtons.length; i++) {
  pageButtons[i].addEventListener("click", function() {
    this.classList.toggle("active");
    /* get refrence to target page of button */
    var pageId = this.getAttribute("pageTarget");
    currentPage = document.getElementById(pageId);
    /* set content page depths */
    if (prevPage) prevPage.style.zIndex = "0";
    currentPage.style.zIndex = "1";
    /* set left position to start page transition */
    currentPage.style.left = "100vw";
    alert("button clicked");
    /* trigger delayed function to clear last page */
    clearPrevPage();
  });
};
/* delayed function transitions prevPage to starting position */
function clearPrevPage() {
  setTimeout(function() {
    if (prevPage) prevPage.style.left = "100vw";
    /* set page variable for next run */
    prevPage = currentPage;
    alert("delayed");
  }, 400);
};

<button class="menuButton">menu</button>
<button class="pageButton" pageTarget="page1">page</button>
<div id="page1">page1</div>