[JavaScript] 장바구니 구현

See the Pen Untitled by flowerdragon95 (@flowerdragon95) on CodePen.

자바스크립트로 품목을 삭제하고, 총 가격을 계산하는 메서드를 작성해보자 html 과 css 는 위의 codepen 예시코드 참고

 

1. 품목삭제 함수

// 품목 삭제 함수
function removeItem(button) {
    var row = button.parentNode.parentNode;
    row.parentNode.removeChild(row);
    calculateTotalPrice();
}

삭제 버튼이 눌리면 버튼의 부모노드에서 removeChild( ) 메서드를 실행하는 아주 간단한 코드이다. 삭제뒤에는 

총 가격을 계산하는 calculateTotalPrice( ) 메서드를 호출한다.

 

2. 총 가격 계산 함수

// 총 가격 계산 함수
function calculateTotalPrice() {
    let totalprice = 0;
    let prices = document.querySelectorAll('.price');
    for (var i = 0; i < prices.length; i++) {
        let p = parseInt(prices[i].innerText);
        totalprice += p;
    }
    document.querySelector('#total-price').innerText = '총액 : '+totalprice;
}

price 클래스를 가진 태그들을 모두 선택한뒤, text로 가진 가격을 모두 int로 형변환하여 더해준다.

그리고 total-price id를 가진 태그에 넣어주는 코드 역시 간단하다.

 

3. 초기 총 가격 계산

// 초기 총 가격 계산
calculateTotalPrice();

var prices = document.querySelectorAll(".price");
var quantity = document.querySelectorAll('#quantity');
quantity.forEach(function(qt,index) {
    var price = prices[index].innerText;
    qt.addEventListener('change',function() {
        if (qt.value <0) {
            alert("0 이상을 선택해주세요.");
            qt.value = 0;
            return;
        }
        var newprice = price*qt.value;
        prices[index].innerText = newprice;
        calculateTotalPrice();
    });
});