我正在尝试制作一个测验网站，并希望它以“开始测验”按钮开始，然后消失并让位于第一个测验问题。到目前为止，我只有以下内容：<html dir="ltr"> <head> <meta charset="utf-8"> <title>Quiz</title> </head> <body> <h1>Football Quiz Game</h1> <button type="button" name="mainButton" onClick = "this.style.visibility= 'hidden';">Begin Quiz!</button> <div class="firstQuestion"> <h3>Who is the top all-time goalscorer in the UEFA Champions League? </h3> <form class="question1"> <input type="radio" id="Cristiano Ronaldo" name="topUCLscorer" value="Cristiano Ronaldo"> <label for="topUCLscorer">Cristiano Ronaldo</label> <input type="radio" id="Raul" name="topUCLscorer" value="Raul"> <label for="topUCLscorer">Raul</label> <input type="radio" id="Lionel Messi" name="topUCLscorer" value="Lionel Messi"> <label for="topUCLscorer">Lionel Messi</label> <input type="radio" id="Karim Benzema" name="topUCLscorer" value="Karim Benzema"> <label for="topUCLscorer">Karim Benzema</label> </form> </div> </body></html>
4 回答
料青山看我应如是
TA贡献1772条经验 获得超8个赞
我拿了代码并在codepen上更新了它。您可以在下面的链接中查看。希望它有效...
<body>
<h1>Football Quiz Game</h1>
<p>Once you are ready to begin, please click the button below. Goodluck</p>
<button type="button" name="mainButton" id="mainButton">Begin Quiz!</button>
<div class="firstQuestion">
<h3>Who is the top all-time goalscorer in the UEFA Champions League?</h3>
<form class="question1">
<input type="radio" id="Cristiano Ronaldo" name="topUCLscorer"
value="Cristiano Ronaldo">
<label for="topUCLscorer">Cristiano Ronaldo</label>
<input type="radio" id="Raul" name="topUCLscorer" value="Raul">
<label for="topUCLscorer">Raul</label>
<input type="radio" id="Lionel Messi" name="topUCLscorer"
value="Lionel Messi">
<label for="topUCLscorer">Lionel Messi</label>
<input type="radio" id="Karim Benzema" name="topUCLscorer"
value="Karim Benzema">
<label for="topUCLscorer">Karim Benzema</label>
</form>
</div>
</body>
CSS
.firstQuestion {
display: none;
}
JavaScript
const firstQuestion = document.querySelector('.firstQuestion');
const begin = document.querySelector('#mainButton');
begin.addEventListener('click', (e) => {
e.preventDefault();
begin.style.display = 'none';
firstQuestion.style.display = 'block';
});
试试这个：https ://codepen.io/dinakajoy/pen/eYJdqYx
肥皂起泡泡
TA贡献1829条经验 获得超6个赞
您可以为此使用 JavaScript。尝试运行以下代码段：
const quizButton = document.querySelector('#quizButton');
const question = document.querySelector('.firstQuestion');
const beginQuiz = () => {
quizButton.style.visibility = 'hidden';
question.style.visibility = 'visible';
}
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>Quiz</title>
</head>
<body>
<h1>Football Quiz Game</h1>
<button id="quizButton" type="button" name="mainButton" onClick =
"beginQuiz()">Begin Quiz!</button>
<div class="firstQuestion" style="visibility: hidden">
<h3>Who is the top all-time goalscorer in the UEFA Champions League?
</h3>
<form class="question1" >
<input type="radio" id="Cristiano Ronaldo" name="topUCLscorer"
value="Cristiano Ronaldo">
<label for="topUCLscorer">Cristiano Ronaldo</label>
<input type="radio" id="Raul" name="topUCLscorer" value="Raul">
<label for="topUCLscorer">Raul</label>
<input type="radio" id="Lionel Messi" name="topUCLscorer"
value="Lionel Messi">
<label for="topUCLscorer">Lionel Messi</label>
<input type="radio" id="Karim Benzema" name="topUCLscorer"
value="Karim Benzema">
<label for="topUCLscorer">Karim Benzema</label>
</form>
</div>
</body>
</html>
ITMISS
TA贡献1871条经验 获得超8个赞
我已经编辑了您自己的代码，并在最后添加了一个简单的 javascript 函数。我只更改了您的 onClick 功能
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>Quiz</title>
</head>
<body>
<h1>Football Quiz Game</h1>
<button type="button" id="mainButton" onClick = "show_form()" >Begin Quiz!</button>
<div class="firstQuestion">
<h3>Who is the top all-time goalscorer in the UEFA Champions League?
</h3>
<form id="question1" style="visibility: hidden">
<input type="radio" id="Cristiano Ronaldo" name="topUCLscorer"
value="Cristiano Ronaldo">
<label for="topUCLscorer">Cristiano Ronaldo</label>
<input type="radio" id="Raul" name="topUCLscorer" value="Raul">
<label for="topUCLscorer">Raul</label>
<input type="radio" id="Lionel Messi" name="topUCLscorer"
value="Lionel Messi">
<label for="topUCLscorer">Lionel Messi</label>
<input type="radio" id="Karim Benzema" name="topUCLscorer"
value="Karim Benzema">
<label for="topUCLscorer">Karim Benzema</label>
</form>
</div>
<script>
function show_form(){
document.getElementById("mainButton").style.visibility="hidden";
document.getElementById("question1").style.visibility="visible";
}
</script>
</body>
</html>
斯蒂芬大帝
TA贡献1827条经验 获得超8个赞
如果您使用的是 jQuery，请参阅下面的示例。
$(function(){
$(document).on("click", "#start", function(){
$(this).hide();
$(".firstQuestion").show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>Quiz</title>
</head>
<body>
<h1>Football Quiz Game</h1>
<button type="button" name="mainButton" id="start">Begin Quiz!</button>
<div class="firstQuestion" style="display:none;">
<h3>Who is the top all-time goalscorer in the UEFA Champions League?
</h3>
<form class="question1">
<input type="radio" id="Cristiano Ronaldo" name="topUCLscorer"
value="Cristiano Ronaldo">
<label for="topUCLscorer">Cristiano Ronaldo</label>
<input type="radio" id="Raul" name="topUCLscorer" value="Raul">
<label for="topUCLscorer">Raul</label>
<input type="radio" id="Lionel Messi" name="topUCLscorer"
value="Lionel Messi">
<label for="topUCLscorer">Lionel Messi</label>
<input type="radio" id="Karim Benzema" name="topUCLscorer"
value="Karim Benzema">
<label for="topUCLscorer">Karim Benzema</label>
</form>
</div>
</body>
</html>
添加回答
举报
0/150
提交
取消