스크립트 질문 입니다.

스크립트 질문 입니다.

QA

스크립트 질문 입니다.

본문

클릭할 때마다 계속 더해져야 하는데 NaN 에러가 뜨네요..

어디가 잘못된건가요..?

 


/* html */
<button type="button" class="btn-price-input" data-price="1000">+ 1천</button>
<button type="button" class="btn-price-input" data-price="10000">+ 1만</button>
<button type="button" class="btn-price-input" data-price="50000">+ 5만</button>
<button type="button" class="btn-price-input" data-price="100000">+ 10만</button>
<button type="button" class="btn-price-input" data-price="1000000">+ 100만</button>
 
$('.btn-price-input').on('click',function(){
        let $btn_price = parseInt($(this).attr('data-price'), 10);
        let $user_price = $('#user_price');
        let $price = parseInt($user_price.val($btn_price), 10);
        
        $price ++;
        $('#user_price').val($price);
    });

이 질문에 댓글 쓰기 :

답변 2

위에 코드가 간단해서 쉽게 보일수있지만  생각보다 민감하네요.

그리고 몇가지 문제점이 있습니다. 아래 문제점을 정리 해보았습니다.

 

1. 자바스크립상에서 문서가 아닌 숫자를 계산 할 경우 숫자형 변수를 선언 하셔야 합니다.

2. price ++ 요렇게 선언 하셨는데요. 결과를 보니 이게 결국은 1값식 더해주게 되어 이것도 문제가 되었습니다.

3. user_price 값이 textbox에서 가지고 올경우 값이 0값이 없고 null 일경우 반드시 null처리를 해주셔야합니다.

 

아래는 코드는  버튼을 클릭하면 정상적으로 버튼값이 증가되어 반영되는 코드로 다시 작성해보았습니다.

 


<script src="http://sir.kr/js/jquery-1.8.3.min.js"></script>
<script src="http://sir.kr/js/jquery.cookie.js"></script>
<script src="http://sir.kr/js/common.js?v=210913"></script>
<button type="button" class="btn-price-input" data-price="1000">+ 1천</button>
<button type="button" class="btn-price-input" data-price="10000">+ 1만</button>
<button type="button" class="btn-price-input" data-price="50000">+ 5만</button>
<button type="button" class="btn-price-input" data-price="100000">+ 10만</button>
<button type="button" class="btn-price-input" data-price="1000000">+ 100만</button>
출력값  : <input type="text" name="user_price" id="user_price" >
 
<script>
$('.btn-price-input').on('click',function(){
        var btn_price = parseInt($(this).attr('data-price'));
        var user_price = parseInt($('#user_price').val());
        if(isNaN(user_price) == true)  user_price = 0;
        var price = user_price + btn_price ;
        
        $('#user_price').val(price);
    });
</script>

 

참고하셔서 도움이 되셨으면 합니다.

사용하시는 코드가 이상한거 같습니다

우선

1. user_price 가 textbox 인가요 ? 일단 그렇다고 가정하고 보겠습니다

 

2. $price 변수에 $user_price 의 값을 넣으시려면 우선  $user_price.val($btn_price) 을 먼저 처리하셔야 합니다

 

3. 즉 


 
<script>
$('.btn-price-input').on('click',function(){
        let $btn_price = parseInt($(this).attr('data-price'), 10);
        let $user_price = $('#user_price');
        $user_price.val($btn_price);
        let $price = parseInt($user_price.val(), 10);
        
        $price ++;
        $('#user_price').val($price);
    });    
</script>

이렇게 되셔야 합니다

답변을 작성하시기 전에 로그인 해주세요.
전체 332
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT