JavaScript removeChild Method Not Working?

31 views Asked by At

I am trying to build a "choose your own adventure"-type text adventure site using JavaScript for choice selection based on this Youtube tutorial and I'm running into an issue where the ".removeChild" method is not working to replace the default "Option #" buttons with the choice selections as shown in the tutorial, and when an option is clicked, it is just adding onto the available options and duplicating instead of moving to the next screen: screenshot. I believe I've followed it step for step and I can't find any inconsistencies that would cause my code to behave differently.

Here is the code: https://codepen.io/invikta/pen/jOJgoyo

And here is the website I'm trying to implement it on, which strangely enough doesn't even show the JavaScript options, only the default ones: https://textadventure.neocities.org/

function showTextNode(textNodeIndex) {
  const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
  textElement.innerText = textNode.text
  while (optionButtonsElement.firstchild) {
    optionButtonsElement.removeChild(optionButtonsElement.firstChild)
  }
  
  textNode.options.forEach(option => {
    if (showOption(option)) {
      const button = document.createElement('button')
      button.innerText = option.text
      button.classList.add('btn')
      button.addEventListener('click', () => selectOption(option))
      optionButtonsElement.appendChild(button)
    }
  })
}
0

There are 0 answers