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

这不就是working..What错误？我不能使用输入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

在这里！
错误是：
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> 

Answer 3

我觉得代码解释本身，问我，如果您有任何疑问

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); 
}