javascript - 如何使用Javascript获取3个输入框值的总和？

Question

我想在下一个名为“totCal”的输入框中显示“txtCal”输入框中输入的值的总和，而无需刷新页面。

paper.php

<label>No of Questions - Easy level</label>
<input type="number" class="txtCal" id="input_item" name="level1_no_of_questions" placeholder="No of Questions - Easy level"  onblur="findTotal()" Required/><br />

<label>No of Questions - Intermediate level</label>
 <input type="number" name="level2_no_of_questions" class="txtCal" id="input_item" placeholder="No of Questions - Intermediate level" onblur="findTotal()" Required/><br />

<label>No of Questions - Difficult level</label>
<input type="number" name="level3_no_of_questions" class="txtCal" id="input_item" placeholder="No of Questions - Difficult level" onblur="findTotal()" Required/><br/>

<label>Total No of Questions</label>
<input type="number" name="total_no_of_questions" class="totCal" value="20"  readonly="readonly" id="input_item" placeholder="Total No of Questions max="20"/><br />

<input type="submit" value="Add Exam Paper" name="submit" id="submit"/>

<form/>

操作页面
问题.php

<?php
if(isset($_POST['submit'])){
    $level1_no_of_questions=$_POST['level1_no_of_questions'];
    $level2_no_of_questions=$_POST['level2_no_of_questions'];
    $level3_no_of_questions=$_POST['level3_no_of_questions'];
    $total_no_of_questions=$_POST['total_no_of_questions'];

$sql2= "INSERT INTO exam_paper (level1_no_of_questions,level2_no_of_questions,level3_no_of_questions,total_no_of_questions) VALUES ('$level1_no_of_questions','$level2_no_of_questions','$level3_no_of_questions','$total_no_of_questions');





         if (mysqli_query($dbcon,$sql2)){

            //Redirection to the this page


            header("Location:paper.php");

            exit();
         }else{ 
            $error=mysqli_error($dbcon);
         }
}   

}  
?>

    <script type="text/javascript">
function findTotal(){
    var arr = document.getElementsByClassName('txtCal');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementByClassName('totCal').value = tot;
}

    </script>

这不起作用..错误是什么？我无法使用输入 id 或名称。names 进入 sql，id 进入设计..

Answer 1

要动态获取结果，您必须将 eventListener 绑定(bind)到每个 input。

如果要在 .totCal 元素内显示结果，则必须将其与索引一起使用(指定元素)，因为 getElementsByClassName 返回一个数组 -像对象一样。

var arr = document.getElementsByClassName('txtCal');

function findTotal() {
  var tot = 0;
  for (var i = 0; i < arr.length; i++) {
     tot += parseInt(arr[i].value);
  }
  document.getElementsByClassName('totCal')[0].value = tot;
}

for (var i = 0; i < arr.length; i++) {
  arr[i].addEventListener('keyup', findTotal);
}

<label>No of Questions - Easy level</label>
<input type="number" class="txtCal" id="input_item" name="level1_no_of_questions" placeholder="No of Questions - Easy level" onblur="findTotal()" Required/><br />

<label>No of Questions - Intermediate level</label>
<input type="number" name="level2_no_of_questions" class="txtCal" id="input_item" placeholder="No of Questions - Intermediate level" onblur="findTotal()" Required/><br />

<label>No of Questions - Difficult level</label>
<input type="number" name="level3_no_of_questions" class="txtCal" id="input_item" placeholder="No of Questions - Difficult level" onblur="findTotal()" Required/><br/>

<label>Total No of Questions</label>
<input type="number" name="total_no_of_questions" class="totCal" value="20" readonly="readonly" id="input_item" placeholder="Total No of Questions max=" 20 "/><br />