DIV on DIV打开按钮单击

Question

我为此游戏制作了3种不同的困难。 我现在拥有的代码仅允许我单击“中”和“难”。 这只会更改DIV中的元素。 我似乎无法使“简单”按钮正常工作，甚至使其他按钮无法正常工作。 现在，它不会用另一个DIV替换整个DIV，而只是在当前一个DIV中显示另一个DIV的内容。 我认为这可能是由于“ .innerHTML”部分引起的，我不确定将其切换为何种功能才能正常工作。

<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/这是我现在设置的方式

谢谢

Answer 1

我看了看jsFiddle并进行了更正。

在这里看看： 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';

}

您在表单内重复按钮，我认为最好在实例中显示/隐藏表单。

Answer 2

启动程序时，它以简单的测验开始。 当您按下“中等”，它从交换的代码divbox3 （容易）的形式从代码divbox3medium （介质）的形式。 这会将您看到的形式从简单的水平测验更改为中等水平的测验。 当您按下“简单”按钮时，它divbox3中的代码（现在包含中级测验的代码，而不再包含简单测验的代码）与divbox3的代码（假设您是简单代码） divbox3 ，但事实并非如此。

就像这样。

X = Easy
Y = Medium
Z = Hard

按下中键

X = Y = Medium
Y = Medium
Z = Hard

按下简易按钮

X = X = Medium
Y = Medium
Z = Hard

要解决此问题，可以通过制作divbox3 ， divbox3easy ， divbox3medium和divbox3hard来做到这divbox3hard 。 然后，您divbox3使用所需的任何级别测验的内容来更改divbox3的内容，但不会覆盖简单测验的代码。

若要更简便地解决此问题，您需要向可见表单（而不是display: none表单）添加一个visible类，然后更改show函数以执行以下操作：

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
}