Javascript DIV on DIV接通按钮点击_Javascript_Html_Css

Javascript DIV on DIV接通按钮点击

javascript html css

Javascript DIV on DIV接通按钮点击,javascript,html,css,Javascript,Html,Css,对于我正在进行的这场比赛，我有3种不同的困难。我现在的代码只允许我点击“中”和“硬”。这只会更改DIV中的元素。我似乎无法使“easy”按钮正常工作，甚至无法使其他按钮正常工作。现在它并没有用另一个替换整个DIV，而是在当前DIV中显示另一个DIV的内容。我想这可能是由“.innerHTML”部分引起的，我不确定要用什么来切换它才能让它全部正常工作 <script> function show(param_div_id) { document.getElementById

对于我正在进行的这场比赛，我有3种不同的困难。我现在的代码只允许我点击“中”和“硬”。这只会更改DIV中的元素。我似乎无法使“easy”按钮正常工作，甚至无法使其他按钮正常工作。现在它并没有用另一个替换整个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>


功能显示（参数分区id）{
document.getElementById（'divbox3'）.innerHTML=document.getElementById（param_div_id）.innerHTML；
}
容易的
中等
硬的




大多数鼹鼠都有多余的拇指可以挖。对还是错
世界上最小的国家是什么？图瓦卢-梵蒂冈城-摩纳哥
元素周期表上最大的原子是什么？铀-弗朗-镭-铅
谁是世界上最富有的人？比尔·盖茨-杰夫·贝佐斯-埃隆·马斯克


容易的
中等
硬的




斑比是什么动物？象虎鹿
说出一个以K开头的美国州
《哈利波特》系列是谁写的？查尔斯·D·J·罗琳-文森特五世
谁写了《红字》


容易的
中等
硬的




钻石是由什么化学元素制成的
什么游戏有爱情、平局、比赛和截击这些术语
超人来自哪个星球
一个俳句由多少个音节组成

这就是我现在设置它的方式

谢谢你

当你开始这个程序时，它从简单的测验开始。当您按下“medium”时，它将代码从

divbox3

（简易）表单交换到

divbox3medium

（中等）表单。这会将您看到的形式从简单级别的测验更改为中等级别的测验。当您按下“easy”（轻松）按钮时，它会将

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

来实现。然后，您可以将

divbox3

的内容更改为您想要的任何级别测验的内容，但不会覆盖轻松测验的代码

要以更简单的方式解决此问题，您需要将

visible

类添加到可视窗体（而不是

display:none

forms），然后更改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
}