Javascript-форум - Показать сообщение отдельно

Rudman · #1 (**permalink**) 26.03.2020, 16:14

Есть форма заказа билетов на поезд

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Train - Tickets</title>
</head>
<body>
	<script src="js/script.js"></script>
<style>
	*{
	background-color: #fbf3ea;

}

div.cont{
	margin-left: 15px;
	margin-right: 15px;
}

h4{
	font-family: fantasy;
	font-size: 2em;
	font-weight: 300;
	text-align: center;
}

.form label{
	width: 120px;
	float: left;
	font-size: 1.2em;
	font-family: Arial;
	font-weight: 700;
}

.form input, textarea{
	width: 500px;
	text-align: center;
	font-family: Arial;
	font-weight: 700;
}

.form input, textarea{
	padding: 9px;
	border: 1px solid #E5E5E5;
	border-radius: 5px;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	background: white;
}

div.sumbit{
	border: 1px solid #E5E5E5;
	border-radius: 5px;
	background: #c7c7c7;
	width: 500px;
	text-align: center;
	font-family: Arial;
	font-weight: 700;
	margin-left: 7.5em;
	padding: 5px;
}

div.sumbit:hover{
	border: 1px solid black;
	border-radius: 5px;
	background: #d6d6d6;

	width: 500px;
	text-align: center;
	font-family: Arial;
	font-weight: 700;
	margin-left: 7.5em;
	padding: 5px;
}

#res {
	margin-top: 25px;
	font-family: Arial;
	font-weight: bold;
}


label .derect{
	font-size: 1.2em;
	font-family: Arial;
	font-weight: 700;
}

.form select{
	width: 500px;
	font-size: 1em;
	border-radius: 8px;
	font-family: Arial;
	font-weight: 700;
	text-align: center;
	padding: 9px;
	border: 1px solid #E5E5E5;
	border-radius: 5px;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	background: white;
}

.form option{
	border-radius: 8px;
	text-align: center;
	background: white;

}

input.sumbit{
	border: 1px solid #E5E5E5;
	border-radius: 5px;
	background: #c7c7c7;
	width: 500px;
	text-align: center;
	font-family: Arial;
	font-weight: 700;
	margin-left: 7.5em;
	padding: 5px;
}

#Place{
display: none;

}

.mesto p{
	font-family: Arial;
	font-weight: 700;
	display: inline-block;
	box-sizing: border-box;
	padding: 5px 5px;
}

.mesto {
  font-family: Arial;
}
.mesto  p {
  margin-bottom: 8px;
  text-align: center;
}
 
.box-row,
.box {
  display: flex;
  flex-wrap: wrap;
}
 
.box {
  margin-right: 8px;
  flex-grow: 1;
  font-family: Arial;
}
.box:last-child {
  margin-right: 0;
}
.box p {
  padding: 5px;
  border: 1px solid #ccc;
  width: 50%;
  margin-bottom: 2px;
}
.box p:nth-child(3), .box p:nth-child(4) {
  margin-bottom: 0;
}

div .order{
	border: 1px solid #E5E5E5;
	border-radius: 5px;
	background: #c7c7c7;
	width: 500px;
	text-align: center;
	font-family: Arial;
	font-weight: 700;
	margin-left: 7.5em;
	padding: 5px;
	margin-top: 20px;
}

#tick{
	margin-top: 25px;
	font-family: Arial;
	font-weight: bold;
	color: red;
}
</style>

	<h4>Ticket</h4>
	<div class="cont">

  <form class="form">
  	<p>
    <label for="derect"> Derection:</label>
    <select id="city">   //от сюда
	    <option disabled>  Куда ехать?</option>
	    <option>Одесса - Львов</option>
	    <option>Харьков - Киев</option>
	    <option>Луганск - Днепр</option>
	    <option>Харьков - Хмельницк</option>
	    <option>Киев - Запорожье</option>
	    <option>Николаев - Сумы</option>
	    <option>Чернигов - Тернополь</option>
    </select>
    </p>

    <p>
    <label for="date"> Date:</label>
    <select id="date">     //от сюда
    	
	    <option disabled>На какую дату?</option>
	    <option>24.03.2020</option>
	    <option>30.03.2020</option>
	    <option>05.04.2020</option>
	    <option>10.04.2020</option>
	    <option>27.05.2020</option>
	    <option>16.07.2020</option>
	    <option>30.07.2020</option>
    </select>
    </p>
  </form>

  <input type="button" class="sumbit" value="Search" onclick="viewPlace()">
  <hr>

  <div id="Place">
   <form class="mesto">
     <p>Выберите место в поезде:</p>
     <div class="box-row">
       <div class="box">
         <p><input type="checkbox" name="n"> 1</p>
         <p><input type="checkbox" name="n"> 2</p>
         <p><input type="checkbox" name="n"> 3</p>
         <p><input type="checkbox" name="n"> 4</p>
       </div>
       <div class="box">
         <p><input type="checkbox" name="n"> 5</p>
         <p><input type="checkbox" name="n"> 6</p>
         <p><input type="checkbox" name="n"> 7</p>
         <p><input type="checkbox" name="n"> 8</p>
       </div>
       <div class="box">
         <p><input type="checkbox" name="n"> 9</p>
         <p><input type="checkbox" name="n"> 10</p>
         <p><input type="checkbox" name="n"> 11</p>
         <p><input type="checkbox" name="n"> 12</p>
       </div>
       <div class="box">
         <p><input type="checkbox" name="n"> 13</p>
         <p><input type="checkbox" name="n"> 14</p>
         <p><input type="checkbox" name="n"> 15</p>
         <p><input type="checkbox" name="n"> 16</p>
       </div>
       <div class="box">
         <p><input type="checkbox" name="n"> 17</p>
         <p><input type="checkbox" name="n"> 18</p>
         <p><input type="checkbox" name="n"> 19</p>
         <p><input type="checkbox" name="n"> 20</p>
       </div>
     </div>
 
   </form>
 
    <input type="button" class="order" value="To order" onclick=""><hr> //нажать сюда 
</div>
    <div id="tick"></div>   //сюда 


    </div>
 </body>
</html>

Нужно сделать вывод билета с помощью js в котором выбраное направление, дата(selecet) и место в поезде

Что тут не так?

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('.order').addEventListener('click', () => {
    document.getElementById('tick').innerHTML+=
    `
      ${ document.querySelector('city').value }<br><hr>
      ${ document.querySelector('date').value }<br><br>
    `
  })
})