[英]DIV on DIV switching on button click
我為此游戲制作了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/這是我現在設置的方式
謝謝
我看了看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';
}
您在表單內重復按鈕,我認為最好在實例中顯示/隱藏表單。
啟動程序時,它以簡單的測驗開始。 當您按下“中等”,它從交換的代碼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
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.