如何通过单击按钮启动 html 表单，然后按钮消失并且表单出现在屏幕上？

4回答

料青山看我应如是

我拿了代码并在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;}JavaScriptconst 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

肥皂起泡泡

您可以为此使用 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

我已经编辑了您自己的代码，并在最后添加了一个简单的 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>

斯蒂芬大帝

如果您使用的是 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>