我正在为我的侄子们写一个星球大战测验。在发布图片和问题后，我想清除屏幕并发布另一张图片和问题，但我似乎无法做到这一点。我哪里出错了？这是我到目前为止的代码。它基本上会同时打印两个问题。
<!doctype html>
<html>
<head>
<title> Star Wars Quiz</title>
<style>
body {
font-family:sans-serif;
text-align:center;
}
form {
margin:0 auto;
width:500px;
text-align:left;
}
</style>
</head>
<body>
<img src="http://i.imgur.com/xkdHqSM.jpg" width="500" height="500" />
<form name="form1" method="post" action="">
<p>What is this?</p>
<p>
<label><input type="radio" name="star" value="1"
onclick="answer(this);">The DeathStar</label>
</p>
<p>
<label><input type="radio" name="star" value="2"
onclick="answer(this);">Tatooine</label>
</p>
<p>
<label><input type="radio" name="star" value="3"
onclick="answer(this);">Peppa Pigs House</label>
</p>
</form>
<script>
var globalScore = 0;
function answer(selectedButton) {
var score = document.getElementById("score");
if (selectedButton.value == "1") {
//document.body.innerHTML = "";//clear screen
globalScore += 1;
}
score.value = globalScore;
}
</script>
<p id="quest2">
<img src="http://i.imgur.com/hee2oSS.png" width="500" height="500" />
<form name="form2" method="post" action="">
<p>What is this?</p>
<p>
<label><input type="radio" name="star" value="1"
onclick="answer(this);">a Bow Fighter</label>
</p>
<p>
<label><input type="radio" name="star" value="2"
onclick="answer(this);">a Tie Fighter</label>
</p>
<p>
<label><input type="radio" name="star" value="3"
onclick="answer(this);">a Street Fighter</label>
</p>
</p>
</form>
最佳答案
你可以使用这个..但我认为你想要遵循的方式变化很大并且对你的项目效率不高。但我已经更正了您的代码..请检查。
<!doctype html>
<html>
<head>
<title> Star Wars Quiz</title>
<style>
body {
font-family:sans-serif;
text-align:center;
}
form {
margin:0 auto;
width:500px;
text-align:left;
}
</style>
</head>
<body>
<div id="score"></div>
<div id="quest1">
<img src="http://i.imgur.com/xkdHqSM.jpg" width="500" height="500" />
<form name="form1" method="post" action="">
<p>What is this?</p>
<p>
<label><input type="radio" name="star" value="1"
onclick="answer(this);">The DeathStar</label>
</p>
<p>
<label><input type="radio" name="star" value="2"
onclick="answer(this);">Tatooine</label>
</p>
<p>
<label><input type="radio" name="star" value="3"
onclick="answer(this);">Peppa Pigs House</label>
</p>
</form>
</div>
<script>
var globalScore = 0;
function answer(selectedButton) {
var score = document.getElementById("score");
if (selectedButton.value == "1") {
//document.body.innerHTML = "";//clear screen
globalScore += 1;
}
score.innerHTML = globalScore;
document.getElementById('quest1').style.display='none';
document.getElementById('quest2').style.display='block';
}
</script>
<div id="quest2" style="display:none;">
<img src="http://i.imgur.com/hee2oSS.png" width="500" height="500" />
<form name="form2" method="post" action="">
<p>What is this?</p>
<p>
<label><input type="radio" name="star" value="1"
onclick="answer(this);">a Bow Fighter</label>
</p>
<p>
<label><input type="radio" name="star" value="2"
onclick="answer(this);">a Tie Fighter</label>
</p>
<p>
<label><input type="radio" name="star" value="3"
onclick="answer(this);">a Street Fighter</label>
</p>
</form>
</div>
关于javascript - 选择单选按钮后清屏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21930800/