231222 개발일지 TIL - [JS]상품 수량에 따른 가격 변동 기능

JavaScript를 이용하여 웹사이트에 상품 수량에 따른 가격 변동 기능

사용자가 상품의 수량을 선택하면 자동으로 가격이 계산되어 표시

// 총 수량 업데이트
function updateTotalQuantity() {
  const quantityInputs = document.querySelectorAll('.quantity-input input');
  let totalQuantity = 0;
  let totalPrice = 0; // 총 가격을 저장할 변수

  quantityInputs.forEach((input, index) => {
    const quantity = parseInt(input.value, 10);

    // 가격을 수량에 따라 변동
    let price;
    if (quantity >= 30) {
      price = 80;
    } else if (quantity >= 20) {
      price = 90;
    } else if (quantity >= 10) {
      price = 100;
    } else {
      price = 110; // 기본 가격 설정
    }

    totalQuantity += quantity;
    totalPrice += quantity * price;
  });

  // 총 수량 업데이트
  const totalQuantityElement = document.querySelector('#totalQuantity');
  totalQuantityElement.textContent = `총 ${totalQuantity} 개`;

  const totalPriceElement = document.querySelector('#totalPrice');
  totalPriceElement.textContent = `총 ${totalPrice.toFixed(2)} 원`;
}

상품의 수량을 입력받고, 각 상품의 수량에 따른 가격을 계산하여 총 가격을 업데이트 한다. 수량이 늘어날수록 가격이 낮아지는 방식이다.