亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何通過單擊按鈕啟動 html 表單，然后按鈕消失并且表單出現在屏幕上？

如何通過單擊按鈕啟動 html 表單，然后按鈕消失并且表單出現在屏幕上？

一只甜甜圈 2022-10-08 10:14:45
我正在嘗試制作一個測驗網站，并希望它以“開始測驗”按鈕開始，然后消失并讓位于第一個測驗問題。到目前為止，我只有以下內容：<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


查看完整回答
反對 回復 2022-10-08
?
肥皂起泡泡

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>


查看完整回答
反對 回復 2022-10-08
?
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>


查看完整回答
反對 回復 2022-10-08
?
斯蒂芬大帝

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>


查看完整回答
反對 回復 2022-10-08
  • 4 回答
  • 0 關注
  • 191 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號