Как инициировать форму html нажатием кнопки, при котором кнопка затем исчезает, а форма появляется на экране? - PullRequest
Новая
       0

Как инициировать форму html нажатием кнопки, при котором кнопка затем исчезает, а форма появляется на экране?

0 голосов
/ 16 июня 2020

Я пытаюсь создать веб-сайт викторины и хотел бы, чтобы он начинался с кнопки «начать викторину», которая затем исчезает и уступает место первому вопросу викторины. Все, что у меня есть, это следующее: 

<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 ]

0 голосов
/ 16 июня 2020

Я отредактировал ваш собственный код и просто добавил простую функцию javascript в конце. Я только изменил вашу функцию onClick 

<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>
0 голосов
/ 16 июня 2020

Я взял код и обновил его на 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

0 голосов
/ 16 июня 2020

Если вы используете 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>
0 голосов
/ 16 июня 2020

Я создал для вас демонстрацию пера кода: https://codepen.io/pen/WNrGqBd

Вы на правильном пути. Для начала я скрыл первый вопрос, используя CSS, display: none, а затем добавил несколько javascript, чтобы он появлялся при нажатии. Я сделал это, добавив классы к соответствующим элементам при нажатии кнопки. Эти классы содержат стили для изменения атрибута отображения элементов, к которым они применяются.

0 голосов
/ 16 июня 2020

Для этого можно использовать 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...