갑자기 버튼 클릭 횟수가 0으로 바꿔져 있고 눌러도 반응하지 않는데 왜 이러는 걸까요~? 파이어베이스에는 지금까지 클릭수가 제대로 누적되어 있거든요~?!
<!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>
<script src="https://www.gstatic.com/firebasejs/7.2/firebase.js"></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" onclick="updateCount(1)">구매희망</button>
<span class="badge bg-secondary count-badge" id="badge1">0</span>
</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" onclick="updateCount(2)">구매희망</button>
<span class="badge bg-secondary count-badge" id="badge2">0</span>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100" id="third-card">
<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" onclick="updateCount(3)">구매희망</button>
<span class="badge bg-secondary count-badge" id="badge3">0</span>
</div>
</div>
</div>
</div>
</div>
<script type="module">
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "00",
authDomain: "test-316a7.firebaseapp.com",
databaseURL: "https://test-316a7-default-rtdb.firebaseio.com",
projectId: "test-316a7",
storageBucket: "test-316a7.appspot.com",
messagingSenderId: "881371539862",
appId: "1
00",
measurementId: "G-F7EXCRJJ9L"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
window.ReactionButtonType = 'reaction';
window.ReactionApiUrl = '//mijunglee82.github.io/reaction';
window.ReactionReqBody = {
entryId: 'goods'
}
</script>
<script>
var count = []
window.addEventListener("load", (event) => {
setCount()
});
function setCount() {
const buyBotton = document.querySelector('#button');
console.log('on load')
var dbRef = firebase.database().ref().child("count");
// load data
dbRef.on('value',snap => {
let data = snap.val()
if (data == undefined || data.length != 3) {
count = [0,0,0]
firebase.database().ref('count').set(count);
}
count = data
for (let i = 1; i <= 3; i++) {
const countBadge = document.querySelector(`#badge${i}`);
countBadge.textContent = count[i-1];
}
console.log(count)
});
}
function updateCount(idx) {
count[idx-1] += 1
firebase.database().ref('count').set(count);
}
</script>
</body>
</html>
----------------------
