<script>
var products = [
{ id: 0, price: 70000, title: 'Blossom Dress' },
{ id: 1, price: 50000, title: 'Springfield Shirt' },
{ id: 2, price: 60000, title: 'Black Monastery' }
];
products.forEach(function(a,i){
var 탬플릿 = `
<div class="col-sm-4">
< img src="https://via.placeholder.com/600" class="w-100">
<h5>${products[i].title}</h5>
<p>가격 : ${products[i].price}</p>
</div>
`
document.querySelector('.row').insertAdjacentHTML('beforeend', 탬플릿);
})
document.querySelector('.testbutton').addEventListener('click',function(){
var 가격순정렬 = products.sort(function(a,b){
return a.price - b.price;
});
products.forEach(function(a,i){
let 탬플릿1 = `
<div class="col-sm-4">
< img src="https://via.placeholder.com/600" class="w-100">
<h5>${가격순정렬[i].title}</h5>
<p>가격 : ${가격순정렬[i].price}</p>
</div>
`
$('.row').html('');
$('.row').append(탬플릿1);
})
})
</script>
버튼 누르면 blossom dress만 나옵니다... 왜 그럴까요??
그런데 html 안지우고 그냥 하면 잘 나옵니다...