안녕하세요, js 3강 데이터 바인딩을 반복문으로 코드를 짜보았는데 오류가 나면서 실행되고 있지 않습니다.
혹시 코드가 틀린것인지, 오류가 나는 이유를 도무지 모르겠어서요..
아래 코드 남겨봅니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" >
<title>Document</title>
</head>
<body>
<div class="card-group container">
<div class="card">
< img src="https://via.placeholder.com/600">
<div class="card-body">
<h5>Card title</h5>
<p>가격 : 70000</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
<div class="card">
< img src="https://via.placeholder.com/600">
<div class="card-body">
<h5>Card title</h5>
<p>가격 : 70000</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
<div class="card">
< img src="https://via.placeholder.com/600">
<div class="card-body">
<h5>Card title</h5>
<p>가격 : 70000</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
</div>
<script>
var products = [
{ id : 0, price : 70000, title : 'Blossom Dress' },
{ id : 1, price : 50000, title : 'Springfield Shirt' },
{ id : 2, price : 60000, title : 'Black Monastery' }
];
for(let i = 0 ; i < products.length ; i++){
productsAll(i);
};
function productsAll(num){
document.querySelectorAll('.card-body h5')[num].innerHtml = products[num].title ;
document.querySelectorAll('.card-body p')[num].innerHtml = "가격 : " + products[num].price ;
}
</script>
</body>
</html>
console창 에러 : Unchecked runtime.lastError: The message port closed before a response was received.
