🚅Processing

🛴 MYCODE

const movieSelect = document.getElementById('movie');
const container = document.querySelector('.container');
const seats = document.querySelectorAll('.row .seat:not(.occupied)');
const seatvs = document.querySelectorAll('.row .seat .selected');
const seatss = document.querySelectorAll('.row .seat');
const occu = document.querySelectorAll('.row .occu');
const btn = document.querySelector('.btn');
const count = document.querySelector('.count');
const to = document.querySelector('.too');
const number_seat = function (vv, arr, id, numb) {

count.innerHTML = numb;


const num = [...seats].indexOf(vv)
arr.push(num)

btn.onclick = function (e) {
    e.preventDefault();
    seatss.forEach(vv => {
        if (vv.classList.contains('selected')) {

            vv.classList.add('occu');
            localStorage.setItem(`movie-${id}`, arr);
            vv.classList.remove('selected')
        }

    })


}

}
const rea = function () {
seatss.forEach(vv => {
if (vv.classList.contains('occu')) {
vv.classList.remove('occu');

    }
})

}
const delete_seat = function () {
rea();

/*

     console.log(occu)
     occu.forEach(vv => {
         vv.classList.remove('occu');
     })
     return true;

*/

}

const update_seat = function (num, arr, money) {

var aa = localStorage.getItem(`movie-${num}`);
if (aa) {
    const zz = aa.split(',')
    console.log(zz)

    zz.forEach(vv => {

        const name = seats[vv];

        name.classList.add('occu');
    })

}
var numberr = 0;
var total = 0;

seats.forEach(v => {


    v.onclick = function (cc) {
        //console.log(num)
        // cc.preventDefault();
        cc.stopPropagation();
        cc.stopImmediatePropagation();
        //cc.stopImmediatePropagation();
        cc.target.classList.add('selected');
        ++numberr;
        console.log(numberr)
        number_seat(v, arr, num, numberr);

        total = money * numberr;

        to.innerHTML = total;

    }
})

}
const show_youritem = function (nn) {
var aa = localStorage.getItem(movie-${+nn});
var v = [];
if (!aa) {
return v;
}
const vv = aa.split(',');

return vv;

}
movieSelect.addEventListener('change', cc => {
//cc.stopPropagation();
cc.preventDefault();
cc.stopImmediatePropagation()
delete_seat()
if (+cc.target.value === 1) {
const arr = show_youritem(+cc.target.value);
update_seat(+cc.target.value, arr, 10)

}
else if (+cc.target.value === 2) {
    const arr = show_youritem(+cc.target.value);
    update_seat(+cc.target.value, arr, 12)

}
else if (+cc.target.value === 3) {
    const arr = show_youritem(+cc.target.value);
    update_seat(+cc.target.value, arr, 8)

}
else if (+cc.target.value === 4) {
    const arr = show_youritem(+cc.target.value);
    update_seat(+cc.target.value, arr, 9);

}

})

🚨occur Error🚨

1) Blueprint Error

Solution =>

2) Code Error

😐 2-1 class list에 add 한 occupied 를 document.quearyselectedAll
해도 나오지 않음

=> cotains 함수를 이용하니 제대로 실행되는것을 확인

😐 2-2 bubbling 때문에 함수가 꼬이기 시작 두번 클릭한것으로 인식함

=> onclick 함수를 이용해서 한번만 실행한다고 지정

=> e.preventdefault()의 심화과정 => e.stopImmediatePropagation()

을 사용함

😑 2-3 selction 함수 선택 가능 but option 선택 불가능

😑 2-4 [...어쩌구].indexof(e) 을 사용
😐 2-5 css 까먹음😅😄😃😃

=> 여기서 e는 div 이고 어쩌구는 div의 모음!

3) Compliment

😍 3-1 에러 찾음
😍 3-2 함수 사용