forEach 안에서 버튼을 사용하면 제일 위에것만 적용이 됩니다.
조회수 266회
장바구니를 만들고 있습니다. forEach를 이용해서 목록이 나오게 했는데 수량 버튼을 구현하려고 합니다.
<input class="minusbutton" type='button' onclick='count("minus")' value='-'/>
<div id='result'>${list.basket_count}</div>
<input class="plusbutton" type='button' onclick='count("plus")' value='+'/>
이런식으로 하고서 자바스크립트를 이용해서 minus버튼이나 plus버튼 클릭시 result값이 -1 +1 되도록 설정했더니 장바구니 목록에서 제일 위에 있는 값만 적용이 됩니다. 예를들어서 3가지의 상품이 있는데 3번째 상품의 갯수를 + 해도 1번째 상품의 갯수가 올라갑니다. 어떻게 해결해야할까요??!
1 답변
-
1. 원래대로라면
window.count()함수 정의를 봐야 하지만... 그보다 더 결정적인 문제가 있습니다. 카운트 올릴 대상이id를 갖고 있다는 게 문제입니다.HTML에서,
id속성은 문서 전체에서 단 한 번씩만 등장해야 합니다. (그래야 identification이 되겠지요.) 하지만 질문자님의 코드는 십중팔구<div id="result">가 여러 번 등장하고 있을 겁니다. 그러니까window.count()가 아무리document.getElementById('result')를 조작하려고 해도, 그 ID로 가장 먼저 발견된 최초의div만 조작되고 있는 겁니다.class로 고치시고, 다음 코드가 동작하는지 확인해 보세요.
<input class="minusbutton" type='button' onclick="count(this, 'minus')" value='-' /> <div class='result'>0</div> <input class="plusbutton" type='button' onclick="count(this, 'plus')" value='+' />var count = function (clickedElement, plusOrMinus) { var parent = clickedElement.parentElement; var result = parent.querySelector('.result'); // 이하 생략 };
2. 지금 구현하고 계신 것을 spinner라고 부릅니다. 숫자 입력을 처리하고, 올리기, 내리기 버튼을 주고, 한 번에 몇씩 올릴 것인지를 정의할 수 있어야 하죠.
근데 사실 그런 걸 구현하자면 최신 브라우저들이 제공하는 number 타입 input의 step을 쓰시는 게 가장 깔끔합니다.
https://www.w3schools.com/tags/att_input_step.asp
저라면 일단은 그냥 이거 쓰고 지나갈 거 같습니다.
댓글 입력