JS 장바구니 구매 이벤트

[채종민]

const buyBtn = document.querySelectorAll('.buybtn');

function buybtnevent() {
    for (const btn of buyBtn) {
        btn.addEventListener('click', function (e) {
            const title = btn.parentElement.children[1].innerText;
            console.log(title);
            const checkLocalItem = localStorage.getItem('cart');
            let checkedTitle = true;
            //아예 cart DB가 없는경우
            if (checkLocalItem === null) {
                localStorage.setItem('cart', JSON.stringify([{ title: title, num: 1 }]))
            } else {
                let changeLocalItem = JSON.parse(checkLocalItem);
                for (let i = 0; i < changeLocalItem.length; i++) {
                    if (changeLocalItem[i].title === title) {
                        changeLocalItem[i].num++;
                        localStorage.setItem('cart', JSON.stringify(changeLocalItem));
                        checkedTitle = true;
                        break;
                    } else {
                        checkedTitle = false;
                    }
                }
                if (!checkedTitle) {
                    changeLocalItem.push({ title: title, num: 1 });
                    localStorage.setItem('cart', JSON.stringify(changeLocalItem));
                }
            }
        })
    }
}

buybtnevent();
-------------------구매버튼 코드-----------------------------
응용문제까지는 다 해결하였으나 다른이벤트를 하고도 구매버튼이 동작하게 하고 싶은데요
현재 상황에서는 초기화면에서만 동작하게 만들었기 때문에 안되는거 까지는 이해를 했는데
도저히 제가 가진 지식에서 어떻게 풀어가야할지 고민하고 고민하다 질문드립니다.

[codingapple]

다른 이벤트 실행시 위 코드 click이벤트리스너 안에 있는 코드 복붙해서 실행하거나
다른 이벤트 실행시 특정버튼을 강제로 클릭하라고 코드짜거나 그러면 될듯요

[채종민]

중복으로 올려 삭제하였습니다.

• 이 답변은 채종민에 의해 1 년, 2 월 전에 수정됐습니다.

[채종민]

addProductBtn.addEventListener('click', function () {
    if (clickCnt === 2) { addProductBtn.style.display = 'none'; }
    fetch(`https://codingapple1.github.io/js/more${clickCnt}.json`)
        .then(res => res.json())
        .then(data => {
            data.forEach((a) => {
                products.push({ id: a.id, price: a.price, title: a.title });
                saveProducts = deepCopy(products);
                insertTempforEach(a, row);
                //2
            });
            buybtnevent();//1
        })
        .catch(error => {
            console.log(error);
        })
    //3
    clickCnt++;
})
-----------------------------------------------------------------------------------------------------

감사합니다. 알려주신대로 다른 이벤트를 하고도 동작이 가능하게끔 구현을 하였습니다.
이후 구현중 한가지 문제점이 다시 발생하여 고민후 고쳐보다가 질문을 드립니다.
더보기 버튼을 누르지 않으면 문제가 없고, 누르더라도 다른 버튼을 누르게되면 다시 괜찮아집니다.
더보기 버튼을 누르게 되면 num의 횟수가 +1 / +2 / +3 등 원하지 않는 값이 증가되거나 마지막 행의 구매버튼은 동작하지 않는등의
오류가 발생합니다.
중복으로 이벤트리스너를 호출하여 더보기 버튼을 누른만큼 중복되는것을 이해 하였습니다.
//1 //2 //3 어느 곳에 삽입하더라도 원하는 동작이 되지 않습니다..

[codingapple]

의심가는 곳에서 num같은거 잘나오나 출력해봅시다 이벤트리스너가 여러번 달려서 그런걸수도요

[글쓴이]

글