Question

我需要使用onchange事件处理程序计算5个数字的平均值。我是编码的新手，并不完全了解onchange的工作原理。我也很困惑如何在'结果'框中显示我的calcAvg函数返回＃

<! doctype html >

<html lang = "en">
<head>
<title> Calculate Average </title>
</head>

<body>
    Number 1:<input type="number" id="number 1" Value="0" 
onchange="calcAvg()"> </br> //do I put anything in between the ()of 
onchange?
    Number 2:<input type="number" id="number 2" Value="0" 
onchange="calcAvg()"> </br>
    Number 3:<input type="number" id="number 3" Value="0" 
onchange="calcAvg()"> </br>
    Number 4:<input type="number" id="number 4" Value="0" 
onchange="calcAvg()"> </br>
    Number 5:<input type="number" id="number 5" Value="0" 
onchange="calcAvg()"> </br>
    Result :<input type=" number" id="result"> </br>
    <input type= 'button' value='calculate' id= 'calculate'>
    <div id= "result"> </div>// 

    <script>
        function calcAvg ( number 1, number 2 ,number 3, number 4, number 5)
{ 
        return ((number 1 + number 2 +number 3+ number 4+ number 5)/5)
        }
    </script>




</body>
</html>

Answer 1

<html lang = "en">
<head>
<title> Calculate Average </title>
</head>

<body>
   Number 1:<input type="number" id="number1" Value="0" 
   onchange="calcAvg()"> </br> 
   Number 2:<input type="number" id="number2" Value="0" 
   onchange="calcAvg()"> </br>
   Number 3:<input type="number" id="number3" Value="0" 
   onchange="calcAvg()"> </br>
   Number 4:<input type="number" id="number4" Value="0" 
   onchange="calcAvg()"> </br>
   Number 5:<input type="number" id="number5" Value="0" 
   onchange="calcAvg()"> </br>
   Result :<input type=" number" id="result"> </br>
<input type= 'button' onClick="calcAvg()" id= 'calculate'>
<div id="result"> </div>// 


 <script>
    function calcAvg () { 
     var num1 = document.getElementById("number1").val() || 0;
     var num2 = document.getElementById("number2").val() || 0;
     var num3 = document.getElementById("number3").val() || 0;
     var num4 = document.getElementById("number4").val() || 0;
     var num5 = document.getElementById("number5").val() || 0;

     document.getElementById("result").value=((num1 + num2 +num3+ num4+ 
     num5)/5);
    }
</script>

通过ID获取输入值并平均这些值。从on change属性调用该函数。您可以通过onclick为按钮调用相同的功能。通过抓取结果ID并为其添加值来设置值。

Answer 2

我稍微改变了你的代码并将类添加到输入flieds而不是id。

首先你应该直接在javascript中调用onchange事件，这样你就必须编写更少的代码。

HTML：

<input class="number" />

JS：

var numInput = $('.number');

function calcAvg() {
var sum = 0;
// add the current val of each input field to the sum variable
numInput.each(function() {
  sum += Number($(this).val());
  });
  // set the avg to the #result input field
  $('#result').val(sum / numInput.length);
};

// run the calcAvg function everytime the input changes
numInput.change(calcAvg);

这是一个工作小提琴： https://jsfiddle.net/o2gxgz9r/18748/

Answer 3

以下代码将给出您的预期输出。

$(function(){
	var sum = 0;
	$('input[type=number]').on("change keyup mouseup", function(){
		$("#result").val(calcAvg());
	});
	$('#calculate').on("click", function(){
		$("#result").val(calcAvg());
	});

});
function calcAvg(){
	var s = $("input[type=number]");
	var sum = 0;
	for(var i=0;i<s.length;i++){
		sum += parseInt($(s[i]).val());
	}
	return sum/s.length;
}

input{
	display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Number 1:<input type="number" id="number1" Value="0">
    Number 2:<input type="number" id="number2" Value="0"> 
    Number 3:<input type="number" id="number3" Value="0"> 
    Number 4:<input type="number" id="number4" Value="0"> 
    Number 5:<input type="number" id="number5" Value="0"> 
    Result :<input type=" number" id="result"> 
    <input type= 'button' value='calculate' id='calculate'>

使用onchange事件处理程序

3 个答案: