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>

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

3 个答案: