나머지 카트의 버튼은 클릭해도 클릭횟수가 체크되지 않고 있어요~?;; 똑같이 복붙했는데 왜 안되고 있는걸까요~?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>goods</title>
<link rel="stylesheet"
href="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/easygpt/default.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<style>
/* 꾸미기 */
.card {
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<div class="hero bg-dark text-white py-5 d-flex align-items-center justify-content-center">
<div class="container text-center">
<h1 class="display-1">goods</h1>
<p class="lead">몽이 굿즈 만들어볼까?</p>
<style>
.hero {
margin-bottom: 30px;
}
</style>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 mb-4">
<div class="card h-100">
<a href="링크주소" target="_blank">
<img src="루돌프몽뮤직박스.png" class="card-img-top" alt="루돌프몽뮤직박스">
</a>
<div class="card-body">
<h5 class="card-title">루돌프몽 뮤직박스</h5>
<h6 class="card-subtitle mb-2 text-muted">예상가격 : 10~15만원</h6>
<p class="card-text">루돌프몽 피규어 뮤직박스에요. 구매의사가 있으신분 100명 이상이면 제작을 고려합니다.</p>
<button class="btn btn-primary buy-btn">구매희망</button> <span class="badge bg-secondary count-badge">0</span>
<script>
let count = 0; const buyButtons = document.querySelectorAll('.buy-btn'); const countBadge = document.querySelector('.count-badge'); buyButtons.forEach(btn => { btn.addEventListener('click', () => { count++; countBadge.textContent = count; }); });
</script>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100">
<a href="링크주소" target="_blank">
<img src="몽보온병.png" class="card-img-top" alt="몽 보온병">
</a>
<div class="card-body">
<h5 class="card-title">몽 보온병</h5>
<h6 class="card-subtitle mb-2 text-muted">예상가격 : 5~7만원</h6>
<p class="card-text">몽 피규어 보온병이에요. 구매의사가 있으신분 100명 이상이면 제작을 고려합니다.</p>
<button class="btn btn-primary buy-btn">구매희망</button> <span class="badge bg-secondary count-badge">0</span>
<script>
let count = 0; const buyButtons = document.querySelectorAll('.buy-btn'); const countBadge = document.querySelector('.count-badge'); buyButtons.forEach(btn => { btn.addEventListener('click', () => { count++; countBadge.textContent = count; }); });
</script>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100">
<a href="링크주소" target="_blank">
<img src="파마머리몽그립톡.png" class="card-img-top" alt="몽 그립톡">
</a>
<div class="card-body">
<h5 class="card-title">몽 그립톡</h5>
<h6 class="card-subtitle mb-2 text-muted">예상가격 : 1~2만원</h6>
<p class="card-text">파마머리몽 그립톡이에요. 구매의사가 있으신분 100명 이상이면 제작을 고려합니다.(폰케이스 제외)</p>
<button class="btn btn-primary buy-btn">구매희망</button> <span class="badge bg-secondary count-badge">0</span>
<script>
let count = 0; const buyButtons = document.querySelectorAll('.buy-btn'); const countBadge = document.querySelector('.count-badge'); buyButtons.forEach(btn => { btn.addEventListener('click', () => { count++; countBadge.textContent = count; }); });
</script>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
