onchangeイベントハンドラを使用して平均を計算する

onchangeイベントハンドラを使用して5つの数値の平均を計算する必要があります。私はコーディングには新しく、onchangeの仕組みを完全には理解していません。私はまた、「結果」ボックスには、私が代わりにIDの入力を少しして、コメントを追加クラスがfliedsあなたのコードを変更しonchangeイベントハンドラを使用して平均を計算する

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

出典

2017-11-15 Cam

あなたのパラメータ名は違法であり、あなただけの初心者のために、要素ごとに1つのIDを持っている必要があります。 – jmargolisvt

私の中をdisplayin私calcAvg機能の戻り＃を持ってする方法について混乱しています。

まず、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/

出典

2017-11-15 19:25:46 JiiB

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

は、入力から値を取得し、それらの値を平均します。 on change属性から関数を呼び出します。ボタンのonclickから同じ関数を呼び出すことができます。結果IDを取得して値を追加して値を設定します。

出典

2017-11-15 19:27:11 NicoLA

次のコードは、期待される出力を示します。

$(function(){ 
 
\t var sum = 0; 
 
\t $('input[type=number]').on("change keyup mouseup", function(){ 
 
\t \t $("#result").val(calcAvg()); 
 
\t }); 
 
\t $('#calculate').on("click", function(){ 
 
\t \t $("#result").val(calcAvg()); 
 
\t }); 
 

 
}); 
 
function calcAvg(){ 
 
\t var s = $("input[type=number]"); 
 
\t var sum = 0; 
 
\t for(var i=0;i<s.length;i++){ 
 
\t \t sum += parseInt($(s[i]).val()); 
 
\t } 
 
\t return sum/s.length; 
 
}

input{ 
 
\t 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'>

出典

2017-11-15 19:33:42

onchangeイベントハンドラを使用して平均を計算する

答えて

関連する問題