Here I have an if statement that should cosole.log e.target if I click a seat, but here in my code, it doesn't do that, and VS code did't give me any errors. Why is that?
And the actual code here:
<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, #price {
color: rgb(255, 230, 0)
}
</style>
</head>
<body>
<div id="movie-container">
<label>Pick a movie</label>
<select id="movie-name">
<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.querySelector("#container");
const seats = document.querySelectorAll(".row.seat");
const count = document.getElementById("count");
const total = document.getElementById("total");
const s = document.getElementById("s");
const selectMovie = document.getElementById("movie-name");
const ticketPrice = +selectMovie.value;
container.addEventListener("click", function (e) {
if (e.target.classList.contains("seat")) {
console.log(e.target);
}
})
</script>
</body>
</html>
I think the problem is in these lines of code:
container.addEventListener("click", function (e) {
if (e.target.classList.contains("seat")) {
console.log(e.target);
}
})
But I'm not sure.
Can anyone answer my question? And thanks in advance.
Aucun commentaire:
Enregistrer un commentaire