스크립트 질문 입니다.
본문
클릭할 때마다 계속 더해져야 하는데 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>
이렇게 되셔야 합니다
