<body>
<div class="card-group container">
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">Card title</h5>
<p>가격 : <span class="price">70000</span></p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">Card title</h5>
<p>가격 :<span class="price">70000</span></p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">Card title</h5>
<p>가격 :<span class="price">70000</span></p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script>
var products = (
{ id : 0, price : 70000, title : 'Blossom Dress' },
{ id : 1, price : 50000, title : 'Springfield Shirt' },
{ id : 2, price : 60000, title : 'Black Monastery' }
);
/* //cardtitle
document.querySelectorAll('.title')(0).innerHTML = products(0).title;
document.querySelectorAll('.title')(1).innerHTML = products(1).title;
document.querySelectorAll('.title')(2).innerHTML = products(2).title;
//price
document.querySelectorAll('.price')(0).innerHTML = products(0).price;
document.querySelectorAll('.price')(1).innerHTML = products(1).price;
document.querySelectorAll('.price')(2).innerHTML = products(2).price;
*/
for(let i = 0; i<products.length; i++){
document.querySelectorAll('.title')(i).innerHTML = products(i).title;
document.querySelectorAll('.price')(i).innerHTML = products(i).price;
}
</script>
</body>
