Должен cosole.log e.target, но не работает. Зачем? - PullRequest
Новая
       3

Должен cosole.log e.target, но не работает. Зачем?

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

Здесь у меня есть if statement, которое должно cosole.log e.target, если я нажимаю на место, но здесь, в моем коде, этого не происходит, и код VS не дал мне никаких ошибок. Почему это?

Вот моя ссылка на код

И фактический код здесь: 

<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>

Я думаю, проблема в эти строки кода: 

container.addEventListener("click", function (e) {
  if (e.target.classList.contains("seat")) {
    console.log(e.target);
  }
})

Но я не уверен.

Кто-нибудь может ответить на мой вопрос? И заранее спасибо.

Ответы [ 3 ]

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

Похоже, вы получили ошибку:

document.getElementByClass не является функцией

Возможно, это опечатка для document.getElementByClassName

Или вы можете использовать Document.querySelector для целевых элементов с помощью CSS селектора

Поэтому вместо: 

const seats = document.getElementByClass(".row.seat");

вы должны сделать это следующим образом: 

const seats = document.querySelector(".row.seat");
0 голосов
/ 26 мая 2020

Ой! Я только что разобрался! В моем коде была ошибка.

В моем коде я набрал getElementByClass, а getElementByClass не является встроенной функцией. Правильный код должен быть getElementByClassName. В коде должно быть Имя .

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

Попробуйте добавить прослушиватель событий к месту вместо контейнера: 

document.querySelectorAll('.seat').forEach(seat => {
  seat.addEventListener('click', e => {
    console.log(e.target)
  })
})

EDIT : забыл l oop результаты querySelectorAll, поскольку он возвращает NodeList

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...