HTML/JavaScript 테이블에 상품 여러개 있을때 수량 변경

Question

현재 HTML 테이블을 이렇게 만들어 놓았습니다. 처음에 만들 때 상품이 하나일 때는 수량 변경이 자바스크립트로 쉬웠는데 상품이 여러개일때 문제입니다. td안에 label > button이 있는데 &#43; 버튼을 누르면 수량을 증가시키고 싶습니다. getElementById 로 가져오면 같은 id가 여러개여서 안돼고 class 이름을 다 다르게 설정하자니 함수를 여러개 만들어야 해서 안될것같습니다. 페이지 화면은 이렇습니다. 어떻게 수량을 개별로 변경이 가능할까요..?

어렵코딩 · Answer

원래 id는 유니크해야 합니다.id가 여러개이면 안됩니다.

잣댐스키 · Answer

id는 유니크 해야하고 보통 상품리스트라면 상품의 고유번호가 있기 때문에 뒤에 상품번호를 붙이는게 일반적입니다.ex) product_amount_1234567 / addAmount(1234567)

hellooo · Answer

1

const plusButtons = document.querySelectorAll('.product_plus') plusButtons.forEach((button) => { button.addEventListener('click', () => { const parent = button.closest('.table_row') // 버튼의 부모 요소인 .table_row를 찾음 const amountElement = parent.querySelector('.ammount') // 부모 요소 내에서 .ammount 요소를 찾음 // 현재 ammount 값을 가져와서 1을 더한 후 다시 적용 let amount = parseInt(amountElement.textContent) amount += 1 amountElement.textContent = amount }) })gpt가 알려주셨습니다

HTML/JavaScript 테이블에 상품 여러개 있을때 수량 변경

3개의 답변

Q&A 목록