Terry Very Good

[Javascript] 여러개 input 숫자 입력 시 자동 계산되고, input tag의 세자리 수마다 숫자 구분 쉼표 들어가는 코드 본문

프로그래밍/(WEB) JAVA Spring Jquery

[Javascript] 여러개 input 숫자 입력 시 자동 계산되고, input tag의 세자리 수마다 숫자 구분 쉼표 들어가는 코드

테리베리 2023. 7. 19. 15:31
728x90
반응형

여러개의 input tag에 숫자를 입력하면, 숫자를 입력할 때마다, 자동으로 곱해지고, 곱해진 값은 숫자형식에 맞게 쉼표처리를 해주는 코드

<div class="form-group row">
	<div class="col-sm-3 mb-3 mb-sm-0" style="text-align: center;"><b style="font-size: small;">상품가격(원)</b>
		<input type="text" id="price1" class="form-control" placeholder="예) 36000" style="font-size: small;">
	</div><h1>x</h1>
    <div class="col-sm-2 mb-3 mb-sm-0" style="text-align: center;"><b style="font-size: small;">회선(개)</b>
        <input type="text" id="amount1" class="form-control" placeholder="예) 3" style="font-size: small;">
    </div><h1>x</h1>
    <div class="col-sm-2 mb-3 mb-sm-0" style="text-align: center;"><b style="font-size: small;">개월(월)</b>
        <input type="text" id="mounth1" class="form-control" placeholder="예). 12" style="font-size: small;">
    </div><h1>=</h1>
    <div class="col-sm-3 mb-3 mb-sm-0" style="text-align: center;"><b style="font-size: small;">예상매출(원)</b>
        <input type="text" id="totalprice1" class="form-control" placeholder="자동 계산" disabled  style="font-size: small;">
    </div>
</div>
<script>
    // 입력 값 가져오기
    var inputA1 = document.getElementById('price1');
    var inputB1 = document.getElementById('amount1');
    var inputC1 = document.getElementById('mounth1');
    var inputD1 = document.getElementById('totalprice1');

    // 값 변경 이벤트 감지
    function updateResult1() {
        var valueA1 = parseFloat(inputA1.value);
        var valueB1 = parseFloat(inputB1.value);
        var valueC1 = parseFloat(inputC1.value);

        var result1 = valueA1 * valueB1 * valueC1;
        result1 = result1.toString().replace(/[^\d]/g, "");
        console.log("result1"+result1);
        result1 = result1.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        console.log("result1"+result1);

        inputD1.value = result1;
    }

    inputA1.addEventListener('input', updateResult1);
    inputB1.addEventListener('input', updateResult1);
    inputC1.addEventListener('input', updateResult1);
</script>
728x90
반응형