input 계산 관련 문의 드립니다.
본문
금액<input type="text" name="wr_1 class="form-control">
수량<input type="text" name="wr_2 class="form-control">
금액<input type="text" name="wr_3 class="form-control">
수량<input type="text" name="wr_4 class="form-control">
<input type="text" name="wr_5 class="form-control">
4개의 인풋에 금액 수량이 들어가는데
(wr_1*wr_2)+(wr_3*wr_4) = 해당 부분에 입력이 되면 wr_5에 계산 된 것이 바로 보여지게 가능 할까요?
그리고 바로 보여지면서 wr_5에 저장이 되게 가능 할까요? 알고 계신 고수님들 있으실까요?????
답변 3
금액 <input type="number" name="wr_1" class="form-control">
수량 <input type="number" name="wr_2" class="form-control">
<br>
금액 <input type="number" name="wr_3" class="form-control">
수량 <input type="number" name="wr_4" class="form-control">
<br>
합계 <input type="number" name="wr_5" class="form-control" readonly>
<script>
for (i = 1; i <= 4; i++) {
document.querySelector("input[name='wr_" + i + "']").oninput = function() {
my_1 = document.querySelector("input[name='wr_1']").value;
my_2 = document.querySelector("input[name='wr_2']").value;
my_3 = document.querySelector("input[name='wr_3']").value;
my_4 = document.querySelector("input[name='wr_4']").value;
document.querySelector("input[name='wr_5']").value = (my_1 * my_2) + (my_3 * my_4);
}
}
</script>
name="wr_5
id="wr_5"
금액: <input type="text" id="wr_1" class="form-control" oninput="calculateTotal()">
수량: <input type="text" id="wr_2" class="form-control" oninput="calculateTotal()"><br><br>
금액: <input type="text" id="wr_3" class="form-control" oninput="calculateTotal()">
수량: <input type="text" id="wr_4" class="form-control" oninput="calculateTotal()"><br><br>
합계: <input type="text" id="wr_5" class="form-control" readonly>
<script>
function calculateTotal() {
var wr_1 = parseFloat(document.getElementById('wr_1').value) || 0;
var wr_2 = parseFloat(document.getElementById('wr_2').value) || 0;
var wr_3 = parseFloat(document.getElementById('wr_3').value) || 0;
var wr_4 = parseFloat(document.getElementById('wr_4').value) || 0;
var total = (wr_1 * wr_2) + (wr_3 * wr_4);
document.getElementById('wr_5').value = total;
}
</script>