堆栈内存溢出
  繁体   English   中英

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

[英]How to initiate an html form from a button click in which the button then disappears and the form appears on the screen?

 原文  2020-06-16 19:31:06  1   5    javascript/ html/ css

问题描述

我正在尝试制作一个测验网站，并希望它以“开始测验”按钮开始，然后消失并让位于第一个测验问题。 到目前为止，我只有以下内容：

<html lang="en" 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>

5 个解决方案

解决方案1
 0  2020-06-16 19:41:04

您可以为此使用 JavaScript。 尝试运行以下代码段： 

 const quizButton = document.querySelector('#quizButton'); const question = document.querySelector('.firstQuestion'); const beginQuiz = () => { quizButton.style.visibility = 'hidden'; question.style.visibility = 'visible'; }
 <html lang="en" 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>

解决方案2
 0  2020-06-16 19:41:49

如果您使用的是 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 lang="en" 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>

解决方案3
 0  2020-06-16 19:45:14

我在这里为您创建了一个代码笔演示： https://codepen.io/pen/WNrGqBd

你在正确的路线上。 首先，我使用 CSS, display: none隐藏了第一个问题，然后添加了一些 javascript 以使其在点击时出现。 当您单击按钮时，我通过向相关元素添加类来完成此操作。 这些类包含 styles 以更改它们应用到的元素的显示属性。

解决方案4
 0  2020-06-16 19:52:42

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

解决方案5
 0  2020-06-16 19:52:43

我已经编辑了您自己的代码，并在最后添加了一个简单的 javascript function。 我只改变了你的 onClick function

<html lang="en" 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 单击后按钮消失，出现选择加入的表单。 很酷的效果。 这个怎么做？ 如何在单击按钮时添加具有html形式的特定设计的文本框 如何让 HTML 表单按钮在屏幕上放置一个下拉表单列表，用户可以在其中输入文本 单击按钮后如何从表单中获取结果（JavaScript 和 HTML） 单击表单的“提交”按钮，如何将数据从HTML保存到Excel？ 如何更改单击按钮时 HTML 表单中显示的表单？ 单击按钮时添加 HTML 表单 单击按钮添加HTML表单 选择框出现/消失按钮单击 如何在单击按钮时提交表单
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM