DIV on DIV switching on button click

Question

I have 3 different difficulties for this game I am making. The code I have right now only allows me to click "medium" and "hard". This only changes the elements inside the DIV. I can't seem to make the "easy" button work or even the other ones to work right. Right now it's not replacing the whole DIV with the other but it just displays the content of the other one inside the current one. I think it might be caused by the ".innerHTML" part and I'm not sure what to switch it out with for it all to work.

<script>
  function show(param_div_id) {
    document.getElementById('divbox3').innerHTML = document.getElementById(param_div_id).innerHTML;
  }

</script>

<!-- Border for the game --> 
   <form id = "divbox3" name = "quiz" > 
      <div class="game-button" style="width:50%"> 
         <button onclick="show('divbox3')">Easy</button>
         <button onclick="show('divbox3med')">Medium</button>
         <button onclick="show('divbox3hard')">Hard</button>
      </div>
      <br>
      <br>

<!-- Easy Quiz code -->
      <p class = "questions">Most moles have an extra thumb to dig with. <b> True or False? </b></p>
   <input id = "textbox" type = "text" name = "q1">

      <p class = "questions">What is the smallest country in the world? <b> Tuvalu - Vatican City - Monaco </b></p>
   <input id = "textbox" type = "text" name = "q2">

      <p class = "questions">What is the biggest atom on the periodic table? <b> Uranium - Francium - Radium - Lead </b></p>
   <input id = "textbox" type = "text" name = "q3">

      <p class = "questions">Who is the richest man in the world? <b> Bill Gates - Jeff Bezos - Elon Musk </b></p>
   <input id = "textbox" type = "text" name = "q4">

   <input id = "buttoneasy" type = "button" value = "Finished!" onclick = "check();">
</form>

   <div id = "easyscoresheet">
      <p id = "easynumber_correct"></p>
      <p id = "easymessage"></p>
   </div>

   <!-- Border for the game --> 
   <form id = "divbox3med" name = "quizmed" style="display:none;"> 
         <div class="game-button" style="width:50%"> 
         <button onclick="show('divbox3')">Easy</button>
         <button onclick="show('divbox3med')">Medium</button>
         <button onclick="show('divbox3hard')">Hard</button>
      </div>
      <br>
      <br>

<!-- Medium Quiz code -->
  <p class = "questions">What type of animal is Bambi? <b> Elephant -  Tiger - Deer </b> </p>
   <input id = "textbox" type = "text" name = "q1">

      <p class = "questions">Name a US state beginning with K?</p>
   <input id = "textbox" type = "text" name = "q2">

      <p class = "questions">Who wrote the Harry Potter series? <b> Charles D. - JK Rowling - Vincent V. </b> </p>
   <input id = "textbox" type = "text" name = "q3">

      <p class = "questions">Who wrote 'The Scarlet Letter'?</p>
   <input id = "textbox" type = "text" name = "q4">

   <input id = "buttonmed" type = "button" value = "Finished!" onclick = "check();">
</form>

<div id = "medscoresheet">
      <p id = "mednumber_correct"></p>
      <p id = "medmessage"></p>
</div>      

<!-- Border for the game --> 
<form id = "divbox3hard" name = "quizhard" style="display:none;"> 
      <div class="game-button" style="width:50%"> 
         <button onclick="show('divbox3')">Easy</button>
         <button onclick="show('divbox3med')">Medium</button>
         <button onclick="show('divbox3hard')">Hard</button>
      </div>
      <br>
      <br>

<!-- Hard Quiz code -->
      <p class = "questions">What chemical element is diamond made of?</p>
   <input id = "textbox" type = "text" name = "q1">

      <p class = "questions">What game features the terms love, deuce, match and volley?</p>
   <input id = "textbox" type = "text" name = "q2">

      <p class = "questions">Which planet did Superman come from?</p>
   <input id = "textbox" type = "text" name = "q3">

      <p class = "questions">How many syllables make up a haiku?</p>
   <input id = "textbox" type = "text" name = "q4">

   <input id = "buttonhard" type = "button" value = "Finished!" onclick = "check();">
</form>

   <div id = "hardscoresheet">
      <p id = "hardnumber_correct"></p>
      <p id = "hardmessage"></p>
   </div>

https://jsfiddle.net/s7vc6y4L/ this is the how I have it set up right now

Thank you

Answer 1

I took a look at the jsFiddle and corrected it.

take a look here: https://jsfiddle.net/e7862c3d/

function show(param_div_id) {  
   var quizList = document.getElementsByClassName('quiz');

   for(var i=0; i < quizList.length; i++) {
       quizList[i].style.display = 'none';
   }
   document.getElementById(param_div_id).style.display = 'block';

}

You were repeating buttons inside your forms and I think its best to show/hide forms in the instance.

Answer 2

When you start the program, it starts with the easy quiz. When you press "medium", it swaps the code from the divbox3 (easy) form to the code from the divbox3medium (medium) form. This changes the form that you see from the easy level quiz to the medium one. When you press the "easy" button, it swaps the code from the divbox3 (which now contains the code for the medium quiz and no longer the code for the easy quiz) with the code from divbox3 (which your assuming is the easy code, but it is not).

It's like this.

X = Easy
Y = Medium
Z = Hard

Press the Medium Button

X = Y = Medium
Y = Medium
Z = Hard

Press the Easy Button

X = X = Medium
Y = Medium
Z = Hard

To fix this, you could do it the hard way by making a divbox3 , divbox3easy , divbox3medium , and divbox3hard . Then you'd change the contents of divbox3 with the contents of whatever level quiz you want, but won't overwrite the code for the easy quiz.

To fix this the easier way, you need to add a visible class to the visible form (not the display: none forms), and then change your show function to do something like this:

function show(param_div_id) {
    // Loop through all elements with the visible class and both remove the class and set the display to none
    // Add the visible class to param_div_id and set it's display to block
}