gpt4 book ai didi

javascript - 选择单选按钮后清屏

转载 作者:行者123 更新时间:2023-11-28 08:30:27 25 4
gpt4 key购买 nike

我正在为我的侄子们写一个星球大战测验。在发布图片和问题后,我想清除屏幕并发布另一张图片和问题,但我似乎无法做到这一点。我哪里出错了?这是我到目前为止的代码。它基本上会同时打印两个问题。

<!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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com