Display product list with button events

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品列表 - 版本4 按鈕事件</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6 bg-gray-100">

<h1 class="text-2xl font-bold mb-4">按下按鈕顯示商品名稱</h1>
<div id="productList" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"></div>

<script>
const products = [
  { name: "商品 A", desc: "好吃又便宜", img: "https://picsum.photos/300/200?9" },
  { name: "商品 B", desc: "人氣熱銷中", img: "https://picsum.photos/300/200?10" },
  { name: "商品 C", desc: "限量特價",   img: "https://picsum.photos/300/200?11" },
];

const container = document.getElementById("productList");
for(let i=0; i<products.length; i++){
  const p = products[i];

  // 先建立一個div容器
  const card = document.createElement("div");
  card.className = "card bg-base-100 shadow-xl";

  // 用 innerHTML 填入卡片內容
  card.innerHTML = `
    <figure><img src="${p.img}" alt="${p.name}"></figure>
    <div class="card-body">
      <h2 class="card-title">${p.name}</h2>
      <p>${p.desc}</p>
      <div class="card-actions justify-end">
        <button class="btn btn-primary">加入購物車</button>
      </div>
    </div>
  `;

  // ✅ 綁定事件：點擊按鈕會 alert 出商品名稱
  card.querySelector("button").addEventListener("click", function(){
    alert("已選擇：" + p.name);
  });

  container.appendChild(card);
}
</script>

</body>
</html>