如何在javascript中自动求和多个输入框内循环
我想计算我的输入框内部循环，如果完成，请帮我解决这个问题
<?php
$jumlah_form = 3;
for($i=1; $i<=$jumlah_form; $i++){
?>
<input type="text" id="txt1" onkeyup="sum1();" /></br>
<?php
}
?>
<input type="text" id="txt2" value= "0" /></br>
<script>
function sum1() {
var txtFirstNumberValue = document.getElementById('txt1').value;
var txtSecondNumberValue = document.getElementById('txt2').value;
var result = parseInt(txtFirstNumberValue) + parseInt(txtFirstNumberValue) ;
if (!isNaN(result)) {
document.getElementById('txt2').value = result;
}
}
</script>
通过循环创建三个输入框，我想计算三个输入框，并在用户输入数字时将结果解析为结果框
海绵宝宝撒浏览 237回答 2
2回答
-
天涯尽头无女友
我想您是在问如何编写 JavaScript 以便将所有输入框的总数加起来，无论 PHP 创建了多少？如果是这样，那么一个好方法是为所有文本框提供相同的类。然后，JavaScript 可以选择具有该类的所有框，遍历它们并获得总值。这是一个使用 3 个文本框的工作示例（就好像 PHP 以这种方式生成它们一样）：var textboxes = document.querySelectorAll(".sum");textboxes.forEach(function(box) { box.addEventListener("keyup", sumAll);});function sumAll() { var total = 0; textboxes.forEach(function(box) { var val; if (box.value == "") val = 0; else val = parseInt(box.value); total += val; }); document.getElementById("total").innerText = total;}<input type="number" id="txt1" class="sum" value="0" /><br/><input type="number" id="txt2" class="sum" value="0" /><br/><input type="number" id="txt3" class="sum" value="0" /><br/><br/><br/> Total: <span id="total"></span> -
largeQ
用 php 生成 html：$count = 5;for($i=1;$i <= $count;$i++) { echo "<input type='number' id='"."txt".i."' /></br>"}从输入计算总和：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Hello World</title></head><body> <form onsubmit="submitForm(this); return false;" > <input type="number" id='text1'> <input type="number" id='text2'> <input type="number" id='text3'> <input type="number" id='text4'> <input type="number" id='text5'> <button type="submit" >Calculate</button> </form> <div> <p>Result:</p> <p id='result'></p> </div> <script> function submitForm(form) { let toReturn = 0; const inputs = form.getElementsByTagName("input"); for(let x = 0; x < inputs.length; x++ ) { toReturn += parseInt(inputs[x].value ? inputs[x].value : 0); } document.getElementById('result').innerHTML = toReturn; return false; } </script></body></html>
随时随地看视频慕课网APP
PHP