클릭 또는 숫자 입력 시 덧셈 구하기

클릭 조건.

• 각각 해당 숫자를 클릭하면 총 합계가 나와야 한다.

입력 조건.

• 원하는 숫자를 입력 시 총 합계가 나와야 한다.
• 숫자만 입력이 가능하다.
• 0 이나 공백 일 경우(띄어쓰기 제외) 에도 합계가 나온다.

<h2>클릭 시 덧셈 구하기</h2>
<ul>
    <li class="num">10000</li>
    <li class="num">30000</li>
    <li class="num">50000</li>
    <li class="num">100000</li>
    <li class="num">1000000</li>
    <li class="total">합계</li>
    <li class="reset">지우기</li>
</ul>
<br/><br/>
<h2>입력 시 덧셈 구하기</h2>
<input type="text" class="input_num" id="input_01">
<input type="text" class="input_num" id="input_02">
<input type="text" class="input_num" id="input_03">
<input type="text" class="input_total" id="input_total" placeholder="합계" readonly>

* { margin: 0; padding: 0; box-sizing: borde-box; }
li { list-style: none; }

ul li { display: inline-block; padding: 10px; margin: 0 5px; min-width: 50px; text-align: center; background: paleturquoise; cursor: pointer; }
.num:hover { background: powderblue; }
.total { background: palevioletred; }
.reset { background: palegreen; }

input { width: 70px; border: 2px solid #999; padding: 10px; }

// jQuery
$(function() {
    
    // click 버튼.
	var sum = 0;
	$('.num').on('click', function() {
    	$(this).each(function() {
        	sum += parseInt($(this).text());
        })
        $('.total').text(sum);
    });
    // 초기화.
    $('.reset').on('click', function() {
    	sum = 0;
    	$('.total').text(sum);
    });
    
    // input 입력.
    var sum2 = parseInt(0);
    $('.input_num').on('keyup', function() {
    	sum2 = parseInt(0);
        this.value = this.value.replace(/[^0-9]/g,'');
        $('.input_num').each(function() {
            if(!isNaN(this.value) && this.value !== '') {
                sum2 += parseInt(this.value);
            } else {
                return 0;
            }
            $('.input_total').val(sum2);
        })
    })
});