4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
장바구니 기능과 localStorage 숙제 도중 문제가 생겼습니다. 우선, 강사님께서 제시하신 숙제는 완료하였으나, 이전에 만들어두었던 더보기 버튼 클릭 시 생성되는 메뉴에도 해당 기능을 사용하고 싶어, 더보기 버튼을 클릭하여 메뉴를 생성할 때 shoppingButton = document.querySelectorAll('.buy')을 사용하여 shoppingButton에 새로 생성된 구매 버튼도 포함할 수 있도록 작성하였습니다. 이후 9개의 메뉴가 생겼을 때 console.log(shoppingButton);를 입력하면 아래와 같이 shoppingButton에 9개의 버튼이 모두 포함되는듯 하지만
정작 for문을 사용하여 버튼을 클릭이벤트를 실행했을 시 처음부터 생성되어 있던 0~2번째 메뉴의 구매 버튼 이외의 버튼을 클릭하였을 때는
클릭이벤트가 적용되지 않는 문제가 있습니다.
어느 부분에서 잘못된 걸까요?
<body> <div class="container"> <div class="row">
</div> </div> <div class="container my-3"> <button class="btn btn-danger">더보기</button> </div>
<!-- JavaScript Bundle with Popper --> <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://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script>
let products = [ { id: 0, price: 70000, title: 'Blossom Dress' }, { id: 1, price: 50000, title: 'Springfield Shirt' }, { id: 2, price: 60000, title: 'Black Monastery' } ]let row = document.querySelector('.row');let moreButton = document.querySelector('.btn-danger'); let buttonClick = 0; let shoppingButton = Array.from(document.querySelectorAll('.buy'))contentView(products);
moreButton.addEventListener('click', function () { buttonClick++;if (buttonClick == 1) { click('more1') } else if (buttonClick == 2) { click('more2') moreButton.style.display = 'none' } })function click(url) { fetch(`https://codingapple1.github.io/js/${url}.json`) .then(res => res.json()) .then(data => { contentView(data); }) .catch(error => { console.log(error) }) }function contentView(data) { for (let i = 0; i < data.length; i++) { let moreView = ` <div class="col-sm-4"> < img src="https://via.placeholder.com/600" class="w-100"> <h5>${data[i].title}</h5> <p class="price">가격 : ${data[i].price}</p> <button class="buy">구매</button> </div> ` $('.row').append(moreView) } shoppingButton = Array.from(document.querySelectorAll('.buy')); } // 1. 카드하단 구매버튼추가하고 그거 누르면 누른 상품의 이름을 localStorage에 저장하기for (let i = 0; i < shoppingButton.length; i++) { shoppingButton[i].addEventListener('click', function (e) {console.log(shoppingButton); let title = e.target.previousElementSibling.previousElementSibling; let out = JSON.parse(sessionStorage.getItem('cart'));if (sessionStorage.getItem('cart') == null) { let storageList = JSON.stringify([title.innerText]); sessionStorage.setItem('cart', storageList); } else if (out.includes(title.innerText)) { alert("이미 등록된 상품입니다.") return } else { out.push(title.innerText); sessionStorage.setItem('cart', JSON.stringify(out)); console.log(out) }})
}
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.