[第二十五天] 牛刀小試-簡易購物車

2024 iThome 鐵人賽

DAY 25

自我挑戰組

認識JavaScript系列第 25 篇

16th鐵人賽

IRENE

2024-10-09 23:58:16

51 瀏覽

分享至

<html>
<head>
  <title>購物車</title>
  <style>
    #cart {
      border-top: 3px solid #000;
    }
    #cart ul {
      list-style-type: none;
      padding: 1;
    }
  </style>
</head>
<body>
  <h1>商品</h1>
  <div class="product">
    <span>1. 五香乖乖 - $25</span>
    <button id='btnp1' onclick="addCart('五香乖乖', 25)">加到購物車</button>
  </div>
  <div class="product">
    <span>1. 椰奶乖乖 - $25</span>
    <button id='btnp2' onclick="addCart('椰奶乖乖', 25)">加到購物車</button>
  </div>
  
  <h2>購物車</h2>
  <div id="cart">
    <ul id="cartItems"></ul>
    <p id="totals">合計: $0</p>
  </div>
</body>
</html>

畫面先設置了2個產品，在之後可以製作成由後台添加的方式（而onclick就可以使用增加監聽）。
以及備有購物車及合計。

let cart = [];
let intTotal = 0;
  
function addCart(productName, productPrice) {
	cart.push({ name: productName, price: productPrice });
  updateCart();
}

function updateCart() {
	const cartItem = document.getElementById('cartItems');
  const total = document.getElementById('totals');
  cartItem.innerHTML = '';
  intTotal = 0;
  
  cart.forEach(item => {
  	const li = document.createElement('li');
    li.textContent = `${item.name} - $${item.price}`;
    cartItem.appendChild(li);
    intTotal += item.price;
  });
  
  total.textContent = `合計: $${intTotal}`;
}

在加入購物車時，需要同時更新購物車的顯示，
所以會用到產品名字及單價，所以function就需要相對應的參數，
而使用push將新增的放入陣列裡。

而更新購物車顯示時，先將明細及金額清空。
注意：「'」與「`」是不一樣的喔~
再添加一筆明細及計算總金額。