[semi] TIL - 버튼 클릭시 숫자 증감시키기

요즘 세미프로젝트를 하고 있는데 내가 맡은 부분 중 결제페이지중
수량 증감버튼에 대해 배운점을 기록하려고 한다

내가 원한건 해당 -,+ 버튼 클릭시 안에 있는 수량이 변경되는 거였다
해당 버튼 코드

<div class="checkAmountQty-inputNum" >
	<input type="button" class="minusBtn" value="-">
	<input type="number" class ="checkAmountQty-num" min="1" max="5" value="1">
	<input type="button" class="plusBtn" value="+">
</div>

처음에 짰던 jQuery문

$(function(){
    $(".plusBtn").click(function(){
        let checkAmountQty = Number($(".checkAmountQty-num").val());

         if(checkAmountQty > 0){
           if(checkAmountQty<5){
                checkAmountQty += 1;
                console.log(checkAmountQty);
            }else{
              return false;
               console.log("실패");
           }
       }
    })
 })

class가 plusBtn인 요소를 클릭시 일어나는 함수에 대해 작성했고

$(function(){
    $(".plusBtn").click(function(){
        // ".checkAmountQty-num" 클래스를 가진 요소의 값을 숫자로 가져온다.
        let checkAmountQty = Number($(".checkAmountQty-num").val());

        // 가져온 수량 값이 0보다 큰지 확인
        if(checkAmountQty > 0){
            // 가져온 수량 값이 5보다 작은지 확인
            if(checkAmountQty < 5){
                // 수량이 5보다 작을 경우 1을 증가
                checkAmountQty += 1;
                console.log(checkAmountQty); // 현재 수량을 콘솔에 출력합니다.
            } else {
                // 수량이 5 이상일 경우 증가할 수 없으므로 실패 메시지를 출력하고 함수를 종료
                console.log("실패");
                return false;
            }
        }
    });
});

이렇게 생각해서 작성했는데
콘솔에 출력되는 값이 2이상으로 올라가지 않았다
내 생각은 계속 추가돼서 2,3,4,5까지는 갈꺼라고 생각했는데 올라가지 않았다

문제의 원인은
입력 필드(.checkAmountQty-num)의 값을 증가시킬 때, 실제로 값을 변경하지 않고 있어서였다. checkAmountQty += 1; 코드는 변수를 증가시키지만, 실제로 입력 필드의 값을 업데이트하지 않고 있어서였다

수량을 증가시킨 후에는 업데이트된 값을 입력 필드에 설정해야 했다. 이를 위해 jQuery의 .val() 메소드를 사용하여 입력 필드의 값을 변경할 수 있다.

즉,해당 코드에
$(".checkAmountQty-num").val(checkAmountQty);
한줄만 작성해주면 되는거였다..ㅎㅎ..
클래스가 .checkAmountQty-num인 요소의 .val()에 변경된 값을 대입해주지 않아서..생긴일..~!

이렇게 고치고 나니 1부터 5까지 잘 올라가는걸 확인했다