입력 필드의 변경에 따라 상태를 업데이트하는 방법은 무엇입니까?

debugcn 에 게시 Dev

jenlee123

그래서 저는 이와 같은 날짜를 선택할 수 있는 영화 티켓 예약 자바 스크립트 앱에 하나의 기능을 구현하려고합니다. 내가 원하는 것은 누군가가 티켓을 예약하고 싶은 날짜를 변경할 때마다 데이터 (선택, 예약 된 좌석)가 제거되고 선택할 수있는 빈 좌석 만 있습니다. 이를 위해 다음을 구현했습니다.

dateSelect.addEventListener('input',updateValue)
function updateValue() {
    
    resetSelection();
    resetSeatGrid();
  }

하지만 어떤 이유로 인해 작동하지 않습니다. 여기에서 전체 코드를 이동하고 있습니다. 조언을 해주셔서 감사합니다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
    <title>Movie Seat Booking</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


 <script>
   $(function() {
   $( "#dtb_yr" ).datepicker({ dateFormat: 'yy-mm-dd' });
 });
 </script>
</head>
<body>
    
    <h1>VanillaJS cinema</h1>

    <div class="wrapper">

        <div class="movie-selection">

            <div class="movie-container">
                <label>Select date</label>
                
                <input type="text" name="dtb_yr" id="dtb_yr" placeholder="Select Date" />
                
                <label>Select the movie</label>
               
                <select id="movie">
                    <option id="selection" value="0">Press to select...</option>
                    <option id="avengers" value="10">Tron: Legacy</option>
                    <option id="joker" value="12">The Internship</option>
                    <option id="toystory" value="8">The Social Network</option>
                    <option id="lionking" value="9">The Matrix</option>
                </select>
            </div>

            <div class="summary-container">
                <div class="items">
                    <p class="text seats-number">Number of seats</p>
                    <p class="text seats-premium-number">Premium seats</p>
                    <p class="text ticket-price">Ticket price</p>
                    <p class="text ticket-premium-price">Ticket premium price</p>
                    <p class="text total-price">Total price</p>
                </div>
                <div class="totals">
                    <p class="number seats-number" id="count">0</p>
                    <p class="number seats-premium-number" id="countpremium">£0</p>
                    <p class="number ticket-price" id="price">£0</p>
                    <p class="number ticket-premium-price" id="premiumprice">£0</p>
                    <p class="number total-price" id="total">£0</p>
                </div>
                
            </div>

            <div class="commands-container">
                <button id="resetselection"><span style="color: tomato;"><i class="fa fa-times-circle"></i></span>
                     Reset</button>
                <button id="confirmselection"><span style="color:limegreen;"><i class="fa fa-pound-sign"></i></span> Pay</button>
            </div>
    
        </div>
        
        <div class="seat-selection">
            <div class="cinema-container">
            
                <div class="screen" id="screen"></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"></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"></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>

                <!-- Premium seats central -->
                <div class="row">
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat premium-seat"></div>
                    <div class="seat premium-seat"></div>
                    <div class="seat premium-seat"></div>
                    <div class="seat premium-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 premium-seat"></div>
                    <div class="seat premium-seat"></div>
                    <div class="seat premium-seat"></div>
                    <div class="seat premium-seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                </div>

                <!-- Normal seats -->
                <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"></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"></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>
        
            <div class="showcase">
                <ul class="row-showcase">
                    <li>
                        <div class="seat"></div>
                        <small>Free</small>
                    </li>
                    <li>
                        <div class="seat premium-seat"></div>
                        <small>Premium seat</small>
                    </li>
                </ul>
                <ul class="row-showcase">
                    <li>
                        <div class="seat selected"></div>
                        <small>Selected</small>
                    </li>
                    <li>
                        <div class="seat occupied"></div>
                        <small>Occupied</small>
                    </li>
                </ul>
            </div>
            
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

script.js

const cinemacontainer = document.querySelector('.cinema-container');
const seats = document.querySelectorAll('.row .seat:not(.occupied)');
const count = document.getElementById('count');
const total = document.getElementById('total');
const movieSelect = document.getElementById('movie');
const dateSelect = document.getElementById('dtb_yr');

let movieList = [];

getMovieList();
checkStorage();


// #########################################################################
// FUNCTIONS
// #########################################################################

// CHECK STORAGE
function checkStorage() {

    const movieIndex = +localStorage.getItem('selectedMovieIndex');

    if (!(movieIndex === 0)) {
        if (localStorage.getItem('selectedSeats_'+movieList[movieIndex][1]) === null) {
            resetSeatGrid();
            localStorage.setItem('selectedSeats_'+movieList[movieIndex][1], '');
            localStorage.setItem('selectedPremiumSeats_'+movieList[movieIndex][1], '');
            localStorage.setItem('occupiedSeats_'+movieList[movieIndex][1], '');
        }
        else {
            resetSeatGrid();
            populateUI();
            updateSelectedCountAndTotal();
        }
    }
    else if (movieIndex === 0) {
        resetSeatGrid();
        document.getElementById('screen').innerHTML = '';
    }
    
}

// ----------------------
// GET MOVIE LIST
function getMovieList() {
    for(i=0;i<movieSelect.options.length;i++) {
        movieList.push([movieSelect.options[i].text, movieSelect.options[i].id]);
    }
}

// ----------------------
// SET MOVIE DATA
// Save selected movie index and price
function setMovieData(movieIndex, moviePrice) {
    localStorage.setItem('selectedMovieIndex', movieIndex);
    localStorage.setItem('selectedMoviePrice', moviePrice);
}

// ----------------------
// POPULATE UI
// Get data from localStorage and populate the UI
function populateUI() {

    if (localStorage.length > 0) {

        const movieIndex = localStorage.getItem('selectedMovieIndex');

        if (movieIndex !== null) {
            movieSelect.selectedIndex = movieIndex;
        }

        if (!(localStorage.getItem('selectedSeats_'+movieList[movieIndex][1]) === null) || localStorage.getItem('selectedSeats_'+movieList[movieIndex][1]).length > 0) {

            const selectedSeats = JSON.parse(localStorage.getItem('selectedSeats_'+movieList[movieIndex][1]));

            if (selectedSeats !== null && selectedSeats.length > 0) {
                seats.forEach((seat, index) => {
                    if(selectedSeats.indexOf(index) > -1) {
                        seat.classList.add('selected');
                    }
                });
            }
        }

        if (!(localStorage.getItem('selectedPremiumSeats_'+movieList[movieIndex][1]) === null) || localStorage.getItem('selectedPremiumSeats_'+movieList[movieIndex][1]).length > 0) {
            
            const selectedPremiumSeats = JSON.parse(localStorage.getItem('selectedPremiumSeats_'+movieList[movieIndex][1]));

            if (selectedPremiumSeats !== null && selectedPremiumSeats.length > 0) {
                seats.forEach((seat, index) => {
                    if(selectedPremiumSeats.indexOf(index) > -1) {
                        seat.classList.add('selected-premium');
                    }
                });
            }
        }

        if (!(localStorage.getItem('occupiedSeats_'+movieList[movieIndex][1]) === null) || localStorage.getItem('occupiedSeats_'+movieList[movieIndex][1]).length > 0) {
            
            const occupiedSeats = JSON.parse(localStorage.getItem('occupiedSeats_'+movieList[movieIndex][1]));
            
            if (occupiedSeats !== null && occupiedSeats.length > 0) {
                seats.forEach((seat, index) => {
                    if(occupiedSeats.indexOf(index) > -1) {
                        seat.classList.add('occupied');
                    }
                });
            }
        }
    }
};

// ----------------------
// UPDATE SELECTED COUNT AND TOTAL
// Update total and count
function updateSelectedCountAndTotal() {

    if (localStorage.length > 0) {

        const selectedSeats = document.querySelectorAll('.row .seat.selected');
        const selectedSeatsPremium = document.querySelectorAll('.row .seat.selected-premium');
        const occupiedSeats = document.querySelectorAll('.row .seat.occupied');

        // Copy selected seats into an array
        // Map through that array
        // Return a new array of indexes
        const seatsIndex = [...selectedSeats].map((seat) => [...seats].indexOf(seat));
        const seatsPremiumIndex = [...selectedSeatsPremium].map((seat) => [...seats].indexOf(seat));
        const occupiedIndex = [...occupiedSeats].map((seat) => [...seats].indexOf(seat));

        const movieIndex = localStorage.getItem('selectedMovieIndex');

        localStorage.setItem('selectedSeats_'+movieList[movieIndex][1], JSON.stringify(seatsIndex));
        localStorage.setItem('selectedPremiumSeats_'+movieList[movieIndex][1], JSON.stringify(seatsPremiumIndex));
        localStorage.setItem('occupiedSeats_'+movieList[movieIndex][1], JSON.stringify(occupiedIndex));

        const selectedSeatsCount = selectedSeats.length;
        const selectedPremiumSeatsCount = selectedSeatsPremium.length;

        count.innerText = selectedSeatsCount;
        countpremium.innerText = selectedPremiumSeatsCount;

        const moviePrice = +localStorage.getItem('selectedMoviePrice');
        price.innerText = "£" + moviePrice.toFixed(2);
        premiumprice.innerText = "£" + (moviePrice * 1.25).toFixed(2);

        total.innerText = "£" + (+(selectedSeatsCount * moviePrice + moviePrice * 1.25 * selectedPremiumSeatsCount)).toFixed(2);

        if (!(movieIndex == 0)) {
            document.getElementById('screen').innerHTML = movieList[movieIndex][0];
        }

    }

};


// #########################################################################
// EVENT LISTENER
// #########################################################################

// ----------------------
// SELECT A MOVIE
// Movie select event
movieSelect.addEventListener('change', (e) => {

    setMovieData(e.target.selectedIndex, e.target.value);
    checkStorage();
    
    ticketPrice = +e.target.value;

    updateSelectedCountAndTotal();
});

dateSelect.addEventListener('input',updateValue)
function updateValue() {
    
    resetSelection();
    resetSeatGrid();
  }
// ----------------------
// SELECT A SEAT
// Seat click event
cinemacontainer.addEventListener('click', (e) => {

    if(e.target.classList.contains('seat') && !e.target.classList.contains('occupied') && !e.target.classList.contains('premium-seat') && !(movieSelect.options[movieSelect.selectedIndex].id === 'selection')) {
        // with toggle it is possible to apply and remove the class quickly
        e.target.classList.toggle('selected');
        updateSelectedCountAndTotal();
    }

    if(e.target.classList.contains('premium-seat') && !e.target.classList.contains('occupied') && !(movieSelect.options[movieSelect.selectedIndex].id === 'selection')) {
        e.target.classList.toggle('selected-premium');
        updateSelectedCountAndTotal();
    }

});

// ----------------------
// RESET SELECTION
// Cancel selected seats
document.getElementById('resetselection').addEventListener('click', function() {
    resetSelection();
    updateSelectedCountAndTotal();
});

// ----------------------
// CONFIRM SELECTION
// Confirms selected seats and block them
document.getElementById('confirmselection').addEventListener('click', function() {
    confirmSelection();
    updateSelectedCountAndTotal();
});


// #########################################################################
// SELECTION FUNCTIONS
// #########################################################################

function resetSelection() {
    seats.forEach(seat => {
        if (seat.classList.contains('selected')) {
            seat.classList.remove('selected');
        }
        if (seat.classList.contains('selected-premium')) {
            seat.classList.remove('selected-premium');
        }
    });
};

function resetSeatGrid() {
    resetSelection();
    seats.forEach(seat => {
        if (seat.classList.contains('occupied')) {
            seat.classList.remove('occupied');
        }
    });
};

function confirmSelection() {
    seats.forEach(seat => {
        if (seat.classList.contains('selected')) {
            seat.classList.add('occupied');
            seat.classList.remove('selected');
        }
        if (seat.classList.contains('selected-premium')) {
            seat.classList.add('occupied');
            seat.classList.remove('selected-premium');
        }
    });
};

RauboLuk

이와 같은 상황에서는 항상 console.log를 추가하여 이벤트 리스너가 작동하는지 확인하십시오.

dateSelect.addEventListener('input',updateValue)
function updateValue() {
  console.log('event fired');
  resetSelection();
  resetSeatGrid();
}

jquery 문서에서 "이 위젯은 프로그래밍 방식으로 요소의 값을 조작하므로 요소의 값이 변경 될 때 기본 변경 이벤트가 발생하지 않을 수 있습니다 . " 라는 메모를 찾을 수 있습니다 . 그래서 '입력'도 실행되지 않았습니다. 다른 스택 게시물에서 이에 대한 도움말을 찾을 수 있습니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

입력 필드의 변경에 따라 상태를 업데이트하는 방법은 무엇입니까?

입력 필드의 변경에 따라 상태를 업데이트하는 방법은 무엇입니까?

특정 조건에 따라 CRM 엔터티의 "상태 이유"필드를 자동 업데이트하는 방법은 무엇입니까?

ID에 따라 상태를 업데이트하는 방법은 무엇입니까?

Django에서 변경 한 사용자에 따라 필드를 자동으로 업데이트하는 방법은 무엇입니까?

MongoDB : 다른 필드에 따라 배열 요소의 필드를 업데이트하는 방법은 무엇입니까?

방법에 따라 필드를 무시하는 방법은 무엇입니까?

react-admin에서 BooleanInput 필드의 상태에 따라 양식 필드를 동적으로 표시하거나 숨기는 방법은 무엇입니까?

쉘에서 명령 종료 상태에 따라 출력을 변경하는 방법은 무엇입니까?

변수에 따라 TextView의 (listview 내부) 텍스트 색상을 변경하는 방법은 무엇입니까?

인스턴스 상태에 따라 메서드를 호출하는 방법은 무엇입니까?

React에서 배열의 상태 변수를 업데이트하는 방법은 무엇입니까?

MySQL에서 삽입 및 업데이트 후 상태를 변경하는 트리거를 만드는 방법은 무엇입니까?

Google 시트의 조건에 따라 입력 범위에서 출력 범위로 데이터를 전송하는 방법은 무엇입니까?

입력 상자 변경시 라벨 태그를 변경하는 방법은 무엇입니까?

사용자에 따라 프롬프트의 색 구성표를 변경하는 방법은 무엇입니까?

커서 위치에 따라 프레임의 텍스트를 변경하는 방법은 무엇입니까?

Django에서 백그라운드 작업 상태를 주기적으로 업데이트하는 방법은 무엇입니까?

Flutter에서 Child의 상태를 업데이트하면서 Child Widget에서 Parent Widget의 상태를 업데이트하는 방법은 무엇입니까?

값에 따라 페이지의 CSS를 동적으로 변경하는 방법은 무엇입니까?

스위치 상태에 따라 항상 업데이트되는 스위치 용 wxpython 프로그램을 만드는 방법은 무엇입니까?

React Native에서 런타임에서 수신 된 소품에 따라 상태를 업데이트하는 방법은 무엇입니까?

사용자가 Drupal 7의 웹 양식에 입력 한 조건에 따라 티저 (필드)를 표시하는 방법은 무엇입니까?

SwiftUI에서 네트워크 데이터에 따라 그리드가 열 수를 변경하도록 만드는 방법은 무엇입니까?

lucene의 필드에 따라 문서를 정렬하는 방법은 무엇입니까?

사용자 입력에 따라 코드를 재설정하는 방법은 무엇입니까?

내 변수 값이 변경되었습니다. 그에 따라 함수를 업데이트하는 방법은 무엇입니까?

Office 365 / Azure에서 Powershell을 사용하여 사용자 지정 DNS A 레코드를 추가 / 업데이트하는 방법은 무엇입니까? 따라서 ISP가 변경하면 IP 주소를 업데이트 할 수 있습니다.

데이터베이스 값의 길이에 따라 텍스트 상자에 입력 할 문자 수를 동적으로 변경하는 방법은 무엇입니까?

시간에 따라 날짜를 변경하는 방법은 무엇입니까?

크기에 따라 JButton의 글꼴 크기를 변경하는 방법은 무엇입니까?