如何使用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/>

动作页面
Question.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或name.names转到sql，id转到设计。

Answer 1

要动态获取结果，必须将eventListener绑定到每个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 /> 

Answer 2

我认为代码说明了自己，问我是否有问题

JSFiddle

<form action="#">
  <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" 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" 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" Required/><br/>

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

  <input type="submit">
</form>

JavaScript：

var totalNo = document.querySelector('[name="total_no_of_questions"]');
var inputSources = [
  document.querySelector('[name="level1_no_of_questions"]'),
  document.querySelector('[name="level2_no_of_questions"]'),
  document.querySelector('[name="level3_no_of_questions"]'),
];

// Set event listeners
inputSources.forEach(function (input) {
  input.addEventListener('blur', findTotal);
});

function findTotal() {
  totalNo.value = inputSources.reduce(function (total, curr) {
    var value = Number(curr.value);

    return total + (isNaN(value) ? 0 : value);
  }, 0);
}

Answer 3

这里是！
错误在于：
document.getElementsByClassName('total').Value = tot;
正确的是：
document.getElementsByClassName('totCal')[0].value = tot;
谢谢

<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 />


    <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.getElementsByClassName('totCal')[0].value = tot;
}

    </script>