동작에는 문제 없는데 제대로 짠건지 궁금합니다,
그리고 3번째 누르면 버튼이 안보이게 하려다 보니
2번째 버튼 클릭시 display =none을 줬는데 이렇게 해도 괜찮을까요?
var productsEl = document.querySelector('.porducts');
function fetchProducts(url){
return fetch(url)
.then(response => response.json())
.then(data => {
var newProducts = data;
newProducts.forEach((product) => {
var divElement = document.createElement('div')
divElement.setAttribute('class', 'col-sm-4');
divElement.innerHTML = `
< img src="https://via.placeholder.com/600" class="w-100">
<h5>${product.title}</h5>
<p>가격 : ${product.price}</p>
</div>`;
productsEl.appendChild(divElement);
});
})
}
buttonEl = document.querySelector('.btn-danger')
var clickCount = 0;
buttonEl.addEventListener('click', function(){
clickCount++;
if (clickCount === 1) {
fetchProducts('https://codingapple1.github.io/js/more1.json');
} else if (clickCount === 2) {
fetchProducts('https://codingapple1.github.io/js/more2.json');
buttonEl.style.display = 'none';
}
})
