프로그래밍/(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
반응형