JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品列表 - 事件與篩選</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">篩選商品（價格小於 25 元）</h1>
<button id="filterBtn" class="btn btn-secondary mb-4">顯示價格 < 25 元商品</button>

<div id="productList" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"></div>

<script>
// === 商品資料 ===
const products = [
  { name: "商品 A", price: 20, desc: "平價好物", img: "https://picsum.photos/300/200?21" },
  { name: "商品 B", price: 30, desc: "人氣熱銷", img: "https://picsum.photos/300/200?22" },
  { name: "商品 C", price: 15, desc: "超值特惠", img: "https://picsum.photos/300/200?23" }
];

// === 找到畫面上的容器 ===
const container = document.getElementById("productList");
const filterBtn = document.getElementById("filterBtn");

// === 顯示商品清單的函式 ===
function render(list) {
  // 每次先清空原有內容
  container.innerHTML = "";

  // 用 for 迴圈逐一加入
  for (let i = 0; i < list.length; i++) {
    const p = list[i];

    // 建立一張卡片
    const card =
      '<div class="card bg-base-100 shadow-xl">' +
        '<figure><img src="' + p.img + '" alt="' + p.name + '"></figure>' +
        '<div class="card-body">' +
          '<h2 class="card-title">' + p.name + '</h2>' +
          '<p>' + p.desc + '</p>' +
          '<p class="text-red-500 font-bold">價格：' + p.price + ' 元</p>' +
          '<div class="card-actions justify-end">' +
            '<button class="btn btn-primary">加入購物車</button>' +
          '</div>' +
        '</div>' +
      '</div>';

    // 加入到畫面中
    container.innerHTML += card;
  }
}

// === 初始顯示所有商品 ===
render(products);

// === 綁定篩選事件 ===
filterBtn.addEventListener("click", function() {
  const filtered = [];

  // 用...