CSS не работает с div в форме, почему это происходит? - PullRequest
Новая
       0

CSS не работает с div в форме, почему это происходит?

0 голосов
/ 30 мая 2020 
<form class="modal-content" id="bookingForm">

    <div class="formContainer">
      <div class="send" id="alert">
        Your Trip Has been Booked Sucessfully.
      </div>
      <h1>Booking Form</h1>
      <p>Please fill in this form to Book The Trip.</p>

Я пытаюсь добавить css к классу send, чтобы он отображался с зеленым фоном при отправке формы. Идентификатор Css приведен ниже: 

.send{
  text-align: center;
  padding: 10px;
  background: green;
  color: white;
  margin-bottom: 10px;
  display: none;
}

Но CSS не работает. В чем причина этого ??

1 Ответ

0 голосов
/ 30 мая 2020

Вам нужно написать JavaScript, чтобы изменить значение свойства display с «none» на «block» после нажатия кнопки внутри формы. Вот полный код: 

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="style.css">
</head>

<body>
   <form class="modal-content" id="bookingForm">

       <div class="formContainer">
           <div class="send" id="alert">
               Your Trip Has been Booked Sucessfully.
           </div>
           <h1>Booking Form</h1>
           <p>Please fill in this form to Book The Trip.</p>
       </div>
       <button>Submit</button>
   </form>
   <!-- <script src='./app.js'></script> -->
   <script>
       document.querySelector('button').addEventListener('click', (e) => showDiv(e));
       function showDiv(e) {
           e.preventDefault();
           document.querySelector('.send').style.display = 'block';
       }
   </script>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...