Я делаю приложение для бронирования мест mov ie, но при запуске кода выдает ошибку. Консоль Google сообщает, что ошибка находится в строке 224, и что это ошибка: «Uncaught TypeError: seat [Symbol.iterator] не является функцией.
Что это означает? И почему?
Вот моя ссылка на исходный код
А вот фактический код:
<html>
<head>
<title>Tommy's movie seat booking app</title>
<style>
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
body {
background-color: black;
outline: 0;
display: flex;
flex-direction: column;
color: white;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
#movie-container {
margin: 20px 0;
}
#movie-container select {
background-color: white;
border: 0;
outline: none;
border-radius: 10px;
cursor: pointer;
font-size: 15px;
margin-left: 10px;
padding: 5px 15px;
}
.seat {
background-color: grey;
width: 15px;
height: 12px;
margin: 5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.seat.selected {
background-color: #00e1ff;
}
.seat.occupied {
background-color: white;
}
.seat:nth-of-type(2) {
margin-right: 20px;
}
.seat:nth-last-of-type(2) {
margin-left: 20px;
}
#not1:hover {
cursor: default;
transform: scale(1);
}
#not2:hover {
cursor: default;
transform: scale(1);
}
.seat:not(.occupied):hover {
cursor: pointer;
transform: scale(1.3);
}
#not2 {
margin-right: 1%;
}
.show-case {
background-color: rgba(17, 0, 255, 0.1);
padding: 5px 10px;
border-radius: 10px;
list-style-type: none;
display: flex;
justify-content: space-between;
}
.show-case li {
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px;
}
.show-case li small {
margin-left: 5px;
}
.screen {
background-color: white;
height: 70px;
width: 100%;
margin: 15px 0;
transform: rotateX(-45deg);
box-shadow: 0 3px 10px rgba(255, 225, 225, 0.7);
}
.row {
display: flex;
}
#container {
margin-left: 2%;
perspective: 700px;
margin-bottom: 30px;
}
#count,
#total {
color: rgb(255, 230, 0)
}
</style>
</head>
<body>
<div id="movie-container">
<label>Pick a movie</label>
<select id="movieName">
<option value="10">Gone with the Wind ($10)</option>
<option value="12">The Sound of Music ($12)</option>
<option value="14">E.T. the Extra-Terrestrial ($14)</option>
<option value="17">Titanic ($17)</option>
<option value="20">The Ten Commandments ($20)</option>
<option value="21">Jaws ($21)</option>
<option value="24">Doctor Zhivago ($24)</option>
<option value="28">The Exorcist ($28)</option>
<option value="29">Snow White and the Seven Dwarfs ($29)</option>
<option value="32">Avengers: Endgame ($32)</option>
<option value="44">Star Wars ($44)</option>
</select>
</div>
<div class="show-case">
<ul>
<li>
<div class="seat" id="not1"></div>
<small>Available</small>
<div class="seat selected" id="not2"></div>
<small>Selected</small>
<div class="seat occupied"></div>
<small>Occupied</small>
</li>
</ul>
</div>
<div id="container">
<div class="screen"></div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
</div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
</div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div class="row">
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
</div>
</div>
<p>You have selected <span id="count">0</span> <span id="s">seats</span> for the price of $<span id="total">0</span>.</p>
<script>
const container = document.getElementById("container");
const seats = document.getElementsByClassName(".row .seat:not(.occupied)");
const count = document.getElementById("count");
const total = document.getElementById("total");
const s = document.getElementById("s");
const selectMovie = document.getElementById("movie-name");
let ticketPrice = +movieName.value;
function update() {
const selectedSeats = document.getElementsByClassName("seat selected");
const selectedSeatsCount = selectedSeats.length - 1;
count.innerText = selectedSeatsCount;
total.innerText = selectedSeatsCount * ticketPrice;
if (count === "1") {
s.innerText = "seat";
} else {
s.innerText = "seats";
}
const seatsIndex = [...selectedSeats].map(function(seats) {
return [...seats].indexOf(seat);
})
console.log(seatsIndex);
}
movieName.addEventListener("change", function(e) {
ticketPrice = +e.target.value;
update();
})
container.addEventListener("click", function(e) {
if (e.target.classList.contains("seat") && !e.target.classList.contains("occupied")) {
e.target.classList.toggle("selected");
update();
}
})
</script>
</body>
</html>