同じページ上の複数のフォームの単純な再利用可能なjavascriptの平均化機能

Question

私は文字通り、48時間以内にjavascriptを自分自身で教えようとし始めました。ちょうどそれを学びたいと思っているのではなく、自分が仕事をしているような小さな個人的なプロジェクトもあります。しかし、私は確かに基本的な問題だと思うが、私は多くのjavascriptの知識が不足しているだけで問題を抱えている。

基本的には、平均化の問題です。
4つの入力フィールドがあり、最初の3つのフィールドの最も近い整数平均に四捨五入されています。
この4フィールドの設定は、ページ上で複数回使用されます。
計算ボタンではなく「リアルタイム」で作業したいので、「onKeyup」と仮定しています。 （どんな種類の検証も必要ない、送信または保存するものなど）

私が近づけることができたコードは、実際には本当に醜い、長い、複雑なものです。私は助けることができませんが、それを行う非常に簡単な方法があると思うだけで、入力の各グループに適用するために同じ機能を取得します。それは以下のように見えますが、おそらくもっと長くなります。

some text 
<input id="a" type="number" /><br/> 
<input id="b" type="number" /><br/> 
<input id="c" type="number" /><br/> 
<input id="final" value="0" disabled /> 

some text 
<input id="a" type="number" /><br/> 
<input id="b" type="number" /><br/> 
<input id="c" type="number" /><br/> 
<input id="final" value="0" disabled /> 

ありがとうございます。これは大きな問題の一部ですが、私はそれを本質的に取り除き、それが機能していることを見て、それを理解することは他のいくつかの問題を解決するのに役立つでしょう。

Answer 1

これは本当に迅速かつ汚いですが、あなたが持っているどのように多くの入力を知っていれば、これは動作するはずです：ここでは

// these would instead be your textboxes 
​var a = document.getElementById('a').value(); 
var b = document.getElementById('b').value(); 
var c = document.getElementById('c').value(); 

var avg = (a+b+b)/3; 

document.getElementById('c').value() = avg; 

はjsfiddleあるので、あなたのアイデアで再生すると、それはあなたのように動作するかどうかを確認することができますそれが欲しい。

Answer 2

jqueryを使用してください。

を使用して異なるマークアップを開始するにはjsfiddle

some text 
<div id="div1"> 
<input id="a" type="number" /><br/> 
<input id="b" type="number" /><br/> 
<input id="c" type="number" /><br/> 
<input id="final" value="0" disabled /> 
</div> 
some text 
<div id="div2"> 
<input id="a" type="number" /><br/> 
<input id="b" type="number" /><br/> 
<input id="c" type="number" /><br/> 
<input id="final" value="0" disabled /> 
</div>​ 

<script type="text/javascript"> 

$("#div1 input").bind('change keyup click',function(){ 
    var final = 0; 
    $("#div1 input").not("#div1 #final").each(function(idx,el){ 
     final += (el.value) ? parseInt(el.value) : 0; 
    }); 
    $("#div1 #final").val(final/3); 
}); 
$("#div2 input").bind('change keyup click',function(){ 
    var final = 0; 
    $("#div2 input").not("#div2 #final").each(function(idx,el){ 
     final += (el.value) ? parseInt(el.value) : 0; 
    }); 
    $("#div2 #final").val(final/3); 
}); 
​</script> 

Answer 3

にlive demoを参照してください、だけでは、それが簡単にあまりにもすべてを対象に行い、そこにページごとに単一のIDも、そのクラスを使用する必要があります。また、効果が読み取り専用の代わりに、ここで

<p>some text</p> 
<div class="group"> 
    <input class="a" type="number" /><br/> 
    <input class="b" type="number" /><br/> 
    <input class="c" type="number" /><br/> 
    <input class="final" value="0" readonly /> 
</div> 
<p>some text</p> 
<div class="group"> 
    <input class="a" type="number" /><br/> 
    <input class="b" type="number" /><br/> 
    <input class="c" type="number" /><br/> 
    <input class="final" value="0" readonly /> 
</div>​ 

無効に使用することができ、ディスプレイとしての最後の入力を使用する場合は、jQueryので

$(function() { 
    $('.group input').on('click', function() { 
     var count = parseInt($(this).val()) || 0; 
     $(this).siblings(':not(.final)').each(function() { 
      if ($(this).val()) count = count + parseInt($(this).val()); 
     }); 
     $(this).siblings('.final').eq(0).val(count); 
    }); 
}); 

をやっ例であり、デモはここにある：http://jsfiddle.net/4S4Vp/1/

Answer 4

私は重複としてフラグにこれを期待しますが、this answerは、コードを持っていないので、楽しむ：

// find all inputs in the page and gather data trying to convert it to number 
var data = [].map.call(document.querySelectorAll('input'), function (v) { 
    if (typeof v.value * 1 === 'NaN') { 
     return 'NaN'; 
    } 
    return v.value * 1;   
}); 
// not all data will be valid, so we filter it 
data = data.filter(function (v) { 
    return !isNaN(v); 
}); 
// and then calculate average 
var avg = data.reduce(function (v, v1) { 
    return v + v1; 
})/data.length; 

Answer 5

これはあなたのレベルで理解できるはずです。 2番目の入力セットは、calc（2）などでa-2という名前になります。

<input id="a-1" type="number" onkeyup="calc(1)" value="0" /><br/> 
<input id="b-1" type="number" onkeyup="calc(1)" value="0" /><br/> 
<input id="c-1" type="number" onkeyup="calc(1)" value="0" /><br/> 
<input id="final-1" value="0" disabled /> 

function calc(n) { 
    var a = document.getElementById("a-" + n).value; 
    var b = document.getElementById("b-" + n).value; 
    var c = document.getElementById("c-" + n).value; 
    document.getElementById("final-" + n).value = Math.round((parseInt(a)+parseInt(b)+parseInt(c))/3); 
}