250x250
반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- MySQL
- 옹졸함
- linux명령어
- OpenCV
- db
- 클라우드
- 공작과개미
- delete
- 나만의주식5법칙
- 중용
- Python
- Face Detection
- 헬레나크로닌
- ChatGPT
- Git
- UPSERT
- 꼭읽어봐야할책
- 다산의마지막습관
- git 업로드
- 훌륭한모국어
- Django
- 지방사람이보는서울사람
- todolist
- php
- 성선택
- 네인생우습지않다
- 비밀번호변경
- 일일투자금액
- 독후감
- 서울로가자
Archives
- Today
- Total
Terry Very Good
[Javascript] 여러개 input 숫자 입력 시 자동 계산되고, input tag의 세자리 수마다 숫자 구분 쉼표 들어가는 코드 본문
프로그래밍/(WEB) JAVA Spring Jquery
[Javascript] 여러개 input 숫자 입력 시 자동 계산되고, input tag의 세자리 수마다 숫자 구분 쉼표 들어가는 코드
테리베리 2023. 7. 19. 15:31728x90
반응형
여러개의 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
반응형