h

자바스크립트 input type에 버튼으로 더하기 (금액 합산)

· 2020-02-24 (월) 09:41:30 · 7014 · 5
1.PNG

요즘 사이트를 만들다 보니 질문을 조금 올리게 되었는데요.

올리다 보니 저도 유용한 코드를 구현하거나 예제를 구하게 되면 올리고 싶어지더군요.

검색 하면 나오는 자료들과 질문답의 답변들의 보면서 감사를 느끼며

사소하지만 제게 유용한 것들을 써보자 합니다.

초보 기준이므로 전문가 분들은 이미 아실 수도 있습니다. (저 같은 초보를 위해서 ..)

 

항상 정보 공유해주시는 회원 님들 감사합니다.

 

//자바 스크립트

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>

 

 

// 텍스트에 버튼으로 금액을 합산 합니다. +가 되기 때문에 5,000을 두번 클릭한다면 5000+5000의 합산 금액을 표시합니다. 자바 함수 중 원클릭은 크롬에서 먹질 않아서 이 방법을 구글링으로 겨우 구했네요. 모든 브라우저 정상 작동합니다. 결과물 이미지로 첨부합니다.


<input type="text" name="line1" class="line" value="0">
<button id="btn_add" a href="#add_one">5,000</button>
<button id="btn_add2" a href="#add_one">10,000</button>
<button id="btn_add3" a href="#add_one">50,000</button>
<button id="btn_add4" a href="#add_one">100,000</button>
<button id="btn_add5" a href="#add_one">100,000</button>
<script>
$('#btn_add').click(function(evt) {
    $('.line').each(function(idx, ele) {
        $(ele).val(parseInt($(ele).val())+5000);
    });
    evt.preventDefault();
});
$('#btn_add2').click(function(evt) {
    $('.line').each(function(idx, ele) {
        $(ele).val(parseInt($(ele).val())+10000);
    });
    evt.preventDefault();
});
$('#btn_add3').click(function(evt) {
    $('.line').each(function(idx, ele) {
        $(ele).val(parseInt($(ele).val())+50000);
    });
    evt.preventDefault();
});
$('#btn_add4').click(function(evt) {
    $('.line').each(function(idx, ele) {
        $(ele).val(parseInt($(ele).val())+100000);
    });
    evt.preventDefault();
});
$('#btn_add5').click(function(evt) {
    $('.line').each(function(idx, ele) {
        $(ele).val(parseInt($(ele).val())+1000000);
    });
    evt.preventDefault();
});
</script>
 

첨부파일

1.PNG (5.1 KB)
7회 2020-02-24 09:41
|

댓글 5개

2020-02-24 (월) 15:41:46
간단한 합산 좋네요...
2020-02-24 (월) 17:10:54
감사합니다
감사합니다
감사합니다~
감사합니다
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
20-03-11 조회 7,514
20-03-09 조회 7,881
20-03-09 조회 6,000
20-03-05 조회 5,604
20-03-05 조회 6,429
20-03-03 조회 9,765
20-03-02 조회 6,596
20-03-02 조회 7,587
20-03-01 조회 2.9만
20-02-28 조회 6,109
20-02-26 조회 6,478
20-02-26 조회 6,211
20-02-24 조회 7,015
20-02-23 조회 5,752
20-02-20 조회 6,909
20-02-18 조회 7,120
20-02-18 조회 5,937
20-02-12 조회 6,740
20-02-11 조회 9,560
20-02-10 조회 7,703
20-02-09 조회 6,203
20-02-09 조회 9,238
20-02-08 조회 5,716
20-02-08 조회 7,477
20-02-08 조회 7,838
20-02-07 조회 7,814
20-02-06 조회 6,691
20-02-05 조회 6,071
20-02-04 조회 6,958
20-02-03 조회 1.9만