对于我正在制作的游戏,我有 3 个不同的困难。我现在拥有的代码只允许我单击“中”和“硬”。这只会更改 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';
}
您在表单中重复按钮,我认为最好在实例中显示/隐藏表单。
关于javascript - DIV on DIV 打开按钮点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53771642/