키입력이나 마우스를 클릭하지 않아도 기본값을 불러와 계산하는 방법이 있을까요?
본문
매번 도움을 받아 이것저것 만들어보고있습니다. 정말 감사히 생각합니다.
기존 확장변수에 값이 있습니다. 이 값을 불러와서 합계를 내는데
수치는 변동이 될수있도 있고 아닐수도 있습니다.
아래의 소스로는
수치를 바꾸거나 마우스로 바꾸면 합계가 바뀌는것까지는 되는데
그냥 value로 입력된값을 그대로 합계에 나타나게 하는 방법이 있을까요?
아래의 예문에서 value로 지정되어있는 1부터 5까지를 더해서 합계에 바로 15가 나타낼수있을까요?
<html lang="ko">
<head>
<meta charset="utf-8">
</head>
<body>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$('.sum_11').on('change keyup', function(evt) {
var sum11 = 0;
$('.sum_11').each(function() {
sum11 += +$(this).val();
});
$('input[name=wr_100]').val(Math.round(sum11));
});
});
</script>
<table>
<tr>
<th scope="col">항목</th>
<th scope="col">1항-1</th>
</tr>
</thead>
<tbody>
<tr>
<td>1번</td>
<td><input type="number" name="wr_11" id="wr_11" value="1" class="sum_11" min="1" max="5"></td>
</tr>
<tr>
<td>2번</td>
<td><input type="number" name="wr_12" id="wr_12" value="2" class="sum_11" min="1" max="5"></td>
</tr>
<tr>
<td>3번</td>
<td><input type="number" name="wr_13" id="wr_13" value="3" class="sum_11" min="1" max="5"></td>
</tr>
<tr>
<td>4번</td>
<td><input type="number" name="wr_14" id="wr_14" value="4" class="sum_11" min="1" max="5"></td>
</tr>
<tr>
<td>5번</td>
<td><input type="number" name="wr_15" id="wr_15" value="5" class="sum_11" min="1" max="5"></td>
</tr>
<tr>
<td>합계</td>
<td><input type="number" name="wr_100" id="wr_100" readonly></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
답변 3
<input id="wr_11" name="wr_11" class="sum_11" value="1">
<br>
<input id="wr_12" name="wr_12" class="sum_11" value="2">
<br>
<input id="wr_13" name="wr_13" class="sum_11" value="3">
<br>
<input id="wr_14" name="wr_14" class="sum_11" value="4">
<br>
<input id="wr_15" name="wr_15" class="sum_11" value="5">
<br>
<input id="wr_100" name="wr_100">
<script>
wr_100.value = 0;
for (i of document.querySelectorAll(".sum_11")) wr_100.value = Number(wr_100.value) + Number(i.value);
</script>
아래 코드만 하단 </body> 위에 갖다 붙이셈
<script>
wr_100.value = 0;
for (i of document.querySelectorAll(".sum_11")) wr_100.value = Number(wr_100.value) + Number(i.value);
</script>
앗! 되네요.... 정말 감사합니다.. 즐거운 주말 보내세요 ^^
아.. 한데... input에 입력은되는데요... 저장하면 값이 안들어가지네요.... ㅠㅠ
제가 착각했나봅니다. 잘됩니다.. 감사합니다. (__);
function(evt) {
var sum11 = 0;
$('.sum_11').each(function() {
sum11 += +$(this).val();
});
$('input[name=wr_100]').val(Math.round(sum11));
}
이부분을 함수로 빼서 사용 하면 될거 같은데요
$(document).ready(function() {
$('.sum_11').on('change keyup', sumCalc);
});
function sumCalc(){
var sum11 = 0;
$('.sum_11').each(function() {
sum11 += +$(this).val();
});
$('input[name=wr_100]').val(Math.round(sum11));
}
별도로 sumCalc() 함수 실행하면 기존 입력값 합계 나올듯하고요
자바는 전혀몰라서 다시한번 문의드립니다.
아래처럼 해보라는것인가요?
숫자를 바꾸면 계산은되는데 여전히 처음부터 입력값이 들어가진 않네요
$(document).ready(function() {
$('.sum_11').on('change keyup', sumCalc);
});
function sumCalc(){
var sum11 = 0;
$('.sum_11').each(function() {
sum11 += +$(this).val();
});
$('input[name=wr_100]').val(Math.round(sum11));
}
<script>
$(document).ready(function() {
function sumCalc(){
var sum11 = 0;
$('.sum_11').each(function() {
sum11 += +$(this).val();
});
$('input[name=wr_100]').val(Math.round(sum11));
}
$('.sum_11').on('change keyup', sumCalc);
// 강제 합계 실행
sumCalc();
});
</script>
이렇게 해보란거였습니당 ㅋ
테스트는 안해봤슴니다;;; 생각만 해본거라...
네.. 합계가 잘 나오네요.. 감사합니다. ^^