Есть форма заказа билетов на поезд
<!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>
`
})
})
