수량을 올리고 내리고 싶다면?

 

 

조금 더 개선할 사항이 어떤 것일까 고민하던 중에 만약 내가 4개를 주문해야하는데 5번을 눌러버리면 다시 삭제후 4번을 클릭해야하는 번거로움이 있을 수 있다고 판단해서 주문 내역에 추가로 갯수를 올리고 내릴수 있는 " - " " + "버튼을 추가해 보았습니다.

 

JavaScript 변경된 코드

 // 주문 내역 업데이트 함수
    function updateOrderList() {
        orderList.innerHTML = '';
        for (let itemName in order) {
            const orderItem = order[itemName];
            const orderItemElement = document.createElement('li');
            orderItemElement.innerHTML = `
                ${itemName} - ₩${orderItem.price.toLocaleString()}
                <button class="decrease" data-item="${itemName}">-</button> // - 버튼 추가
                ${orderItem.quantity}
                <button class="increase" data-item="${itemName}">+</button> // + 버튼 추가
                <button class="remove" data-item="${itemName}">삭제</button>
            `;
            orderList.appendChild(orderItemElement);
        }
        totalPriceElement.textContent = totalPrice.toLocaleString();
    }

    // 아이템 삭제 로직
    orderList.addEventListener('click', (event) => {
        const itemName = event.target.getAttribute('data-item');
        
        // **수량 증가 추가** //
        if (event.target.classList.contains('increase')) {
            order[itemName].quantity += 1;
            totalPrice += order[itemName].price;
            updateOrderList();
        }

        // **수량 감소 추가** //
        if (event.target.classList.contains('decrease')) {
            if (order[itemName].quantity > 1) {
                order[itemName].quantity -= 1;
                totalPrice -= order[itemName].price;
            } else {
            totalPrice -= order[itemName].price;
            delete order[itemName];
            }
            updateOrderList();
        }

        //수량 삭제
        if (event.target.classList.contains('remove')) {
            totalPrice -= order[itemName].price * order[itemName].quantity;
            delete order[itemName];
            updateOrderList();
        }
    });