Getting to the next button chain

Question

I'm trying to create a chain of buttons: First options; - Button 1 - Button 2

IF chosen Button 1: - Button 1a - Button 1b

IF chosen Button 1a: - Button 1aa - Button 1ab

IF chosen Button 1b: - Button 1ba - Button 1bb

And so on.. same goes for Button 2.

Thus far I got this but my .js is not working out for me.

I tried it in two ways.

WAY 1: HTML (onclick="nextPush" is going to change in way 2)

  <div class="buttons1-2">
    <button id="btn1" class="btn btn1" onclick="buttonPushed(this)">Button 1</button>
    <button id="btn2" class="btn btn2" onclick="buttonPushed(this)">Button 2</button>
  </div>
  <div class="buttons1a-b">
    <button id="btn1a" class="btn btn1a" onclick="nextPush(this)">Button 1a</button>
    <button id="btn1b" class="btn btn1b" onclick="nextPush(this)">Button 1b</button>
  </div>
  <div class="buttons2a-b">
    <button id="btn2a" class="btn btn2a">Button 2a</button>
    <button id="btn2b" class="btn btn2b">Button 2b</button>
  </div>
  <div class="buttons1aa-ab">
    <button id="btn1aa" class="btn btn1a">Button 1aa</button>
    <button id="btn1ab" class="btn btn1b">Button 1ab</button>
  </div>
  <div class="buttons1ba-bb">
    <button id="btn1ba" class="btn btn2a">Button 1ba</button>
    <button id="btn1bb" class="btn btn2b">Button 1bb</button>
  </div>

WAY 1: .JS

function buttonPushed(btn) {
  var replacewith = "buttons1a-b";
  if (btn.id == "btn2") {
    replacewith = "buttons2a-b";
  }

function nextPush(btn) {
  var replacewith = "buttons1aa-ab";
  if (btn.id == "btn1b") {
    replacewith = "buttons1ba-bb";
  }

  var allChildren = document.getElementsByClassName('buttons')[0].children;
  for (var i = 0; i < allChildren.length; i++) {
    var child = allChildren[i];
    if (child.className != replacewith) {
      child.style.display = "none";
    } else {
      child.style.display = "inline";
    }
  }

}

WAY 2: HTML (notice the onclick="nextPush" is gone)

  <div class="buttons1-2">
    <button id="btn1" class="btn btn1" onclick="buttonPushed(this)">Button 1</button>
    <button id="btn2" class="btn btn2" onclick="buttonPushed(this)">Button 2</button>
  </div>
  <div class="buttons1a-b">
    <button id="btn1a" class="btn btn1a" onclick="buttonPushed(this)">Button 1a</button>
    <button id="btn1b" class="btn btn1b" onclick="buttonPushed(this)">Button 1b</button>
  </div>
  <div class="buttons2a-b">
    <button id="btn2a" class="btn btn2a">Button 2a</button>
    <button id="btn2b" class="btn btn2b">Button 2b</button>
  </div>
  <div class="buttons1aa-ab">
    <button id="btn1aa" class="btn btn1a">Button 1aa</button>
    <button id="btn1ab" class="btn btn1b">Button 1ab</button>
  </div>
  <div class="buttons1ba-bb">
    <button id="btn1ba" class="btn btn2a">Button 1ba</button>
    <button id="btn1bb" class="btn btn2b">Button 1bb</button>
  </div>

WAY 2 .JS

function buttonPushed(btn) {
  /* btn = Id: btn1, btn2, btn1a or btn1b */
  let replacewith = "buttons1a-b";
    if (btn.id == "btn2") {
      replacewith = "buttons2a-b";
    }
    else if (btn.id == "btn1a") {
      replacewith = "buttons1aa-ab";
    }
    else if (btn.id == "btn1b") {
      replacewith = "buttons1ba-bb";
    }
} 

  let allChildren = document.getElementsByClassName('buttons')[0].children;
  for (let i = 0; i < allChildren.length; i++) {
    let child = allChildren[i];
    if (child.className != replacewith) {
      child.style.display = "none";
    } else {
      child.style.display = "inline";
    }
  }

.CSS for BOTH WAYS:

.buttons1a-b {
  display: none;
}

.buttons2a-b {
  display: none;
}

.buttons1aa-ab {
  display: none;
}

.buttons1ba-bb {
  display: none;
}

Sorry for the long post, hope you can help me out :) If you know a better way to do this, please also do let me know.

Answer 1

Building on your example, and the one from Michael, you could also use another approach of declaring what div you want displayed by attaching an attribute to the button, and then add an event listener to all buttons with that attribute. This makes the HTML slightly smaller and more declarative, and makes it easier to switch what element you want to display next instead of relying on a particular schema of id's.

(function(document) {
  // get all buttons that have the attribute data-next
  const buttons = document.querySelectorAll('[data-next]');
  for (const item of buttons) {
    // get references to the parent item and next item to hide/show
    const parentId = item.getAttribute('data-parent');
    const parent = document.querySelector(`#${parentId}`);
    const nextDivId = item.getAttribute('data-next');
    const nextDiv = document.querySelector(`#${nextDivId}`);
    if (!nextDiv) {
      console.error('could not find next div for button ', item);
    }
    // attach an event listener for click that toggles visibility of the above elements
    item.addEventListener('click', function() {
      nextDiv.classList.toggle('hidden');
      parent.classList.toggle('hidden');
    });
  }
})(document);

.hidden {
  display: none;
}

<div id="base">
  <button data-next="option-a" data-parent="base">Option A</button>
  <button data-next="option-b" data-parent="base">Option B</button>
</div>

<div id="option-a" class="hidden">
  <p>Option A</p>
</div>
<div id="option-b" class="hidden">
  <p>Option B</p>
</div>

If you want to add new buttons dynamically (or change what your next items should be) you will need to attach the event listener when you create your other buttons. For instance, you can do something like the following:

(function(document) {
  function onButtonClicked(event) {
    const item = event.target;
    // get references to the next item to show
    const nextDivId = item.getAttribute('data-next');
    const nextDiv = document.querySelector(`#${nextDivId}`);
    if (!nextDiv) {
      console.error('could not find next div for button ', item);
    }
    // The function toggle on classList either removes a class if it exists
    // or adds it if it does not exist in the list of classes on the element
    nextDiv.classList.toggle('hidden');
    // check if container has an attribute for loading next buttons lazily
    const lazyLoadLevel = nextDiv.getAttribute('data-level');
    // if we found the attribute, load the contents
    if (lazyLoadLevel) {
      // cast lazyLoadedLevel to an integer (with +) since getAttribute returns a string
      loadLevel(+lazyLoadLevel, nextDiv);
      // since we have populated the container we can remove the attribute so that elements do not get added again
      nextDiv.removeAttribute('data-level');
    }

    // get references to the parent item to hide
    const parentId = item.getAttribute('data-parent');
    const parent = document.querySelector(`#${parentId}`);
    if (parent) {
      parent.classList.toggle('hidden');
    }
  }

  function addButton(parent, nextElementId, text) {
    const newItem = document.createElement('button');
    newItem.setAttribute('data-next', nextElementId);
    newItem.setAttribute('data-parent', parent.getAttribute('id'));
    newItem.textContent = text;
    newItem.addEventListener('click', onButtonClicked);
    parent.appendChild(newItem);
  }

  function loadLevel(level, container) {
    switch (level) {
      // depending on level you can define other buttons to add here
      case 2:
        {
          addButton(container, 'option-a', 'Goto option a');
          break;
        }
    }
  }

  // get all *existing* buttons that have the attribute data-next
  // this is run once when the script loads, and will not attach listeners to dynamically created buttons
  const buttons = document.querySelectorAll('[data-next]');
  for (const item of buttons) {
    // attach an event listener for click that toggles visibility of parent and next elements
    // notice that we pass a reference to onButtonClicked. Even though it is a function we shouldn't call it *here*
    item.addEventListener('click', onButtonClicked);
  }
})(document);

.hidden {
  display: none;
}

<div id="base">
  <button data-next="option-a" data-parent="base">Option A</button>
  <button data-next="option-b" data-parent="base">Option B</button>
</div>

<div id="option-a" class="hidden">
  <p>Option A</p>
  <button data-next="option-b" data-parent="option-a">Option B</button>
</div>
<div id="option-b" class="hidden" data-level="2">
  <p>Option B. The contents of this div is loaded lazily based on the value of the attribute data-level</p>
</div>

Answer 2

At first, I was thinking this should be done entirely dynamically -- where the next container of buttons is created and inserted into the DOM when the button is clicked. But judging by your current attempts, it seems like you want to have all the buttons hardcoded into the source, hidden with CSS, and shown with DOM during the click event. Here is one way you can achieve that:

function handleButtonClick(button) {
  const clickedID = button.id.substring(3);
  const nextDiv = document.getElementById("buttons" + clickedID);
  if (nextDiv) {
    nextDiv.style.display = "block";
  }
}

.hidden {
  display: none;
}

<div id="buttons">
  <button id="btn1" onclick="handleButtonClick(this)">Button 1</button>
  <button id="btn2" onclick="handleButtonClick(this)">Button 2</button>
</div>

<div id="buttons1" class="hidden">
  <button id="btn1a" onclick="handleButtonClick(this)">Button 1a</button>
  <button id="btn1b" onclick="handleButtonClick(this)">Button 1b</button>
</div>

<div id="buttons2" class="hidden">
  <button id="btn2a" onclick="handleButtonClick(this)">Button 2a</button>
  <button id="btn2b" onclick="handleButtonClick(this)">Button 2b</button>
</div>

<div id="buttons1a" class="hidden">
  <button id="btn1aa" onclick="handleButtonClick(this)">Button 1aa</button>
  <button id="btn1ab" onclick="handleButtonClick(this)">Button 1ab</button>
</div>

<div id="buttons1b" class="hidden">
  <button id="btn1ba" onclick="handleButtonClick(this)">Button 1ba</button>
  <button id="btn1bb" onclick="handleButtonClick(this)">Button 1bb</button>
</div>

<div id="buttons2a" class="hidden">
  <button id="btn2aa" onclick="handleButtonClick(this)">Button 2aa</button>
  <button id="btn2ab" onclick="handleButtonClick(this)">Button 2ab</button>
</div>

<div id="buttons2b" class="hidden">
  <button id="btn2ba" onclick="handleButtonClick(this)">Button 2ba</button>
  <button id="btn2bb" onclick="handleButtonClick(this)">Button 21bb</button>
</div>

This just identifies which button was clicked, and uses that information to determine the next div to show, until there are no more divs that correspond to the one that was clicked.