1

私は文字通り、48時間も経たないうちにjavascriptを独学しようとし始めました. それを学びたいだけでなく、私が取り組んでいる小さな個人的なプロジェクトもあり、例として私の作業学習の一種として使用しています。しかし、私は問題にぶつかりました。これはかなり基本的なものであると確信しています。JavaScriptの知識があまりないことが妨げになっています。

基本的には平均化の問題です。
4 つの入力フィールドがあり、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 />

前もって感謝します。これはより大きな問題の一部ですが、私はそれを本質に落とし込もうとしました。それが機能するのを見て理解することは、他の問題を解決するのに大いに役立ちます.

4

5 に答える 5

1

これはあなたのレベルで理解できるはずです。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);
}
于 2012-04-13T22:34:02.553 に答える
1

別のマークアップを使用して開始するには、ページごとに 1 つの 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/ </p>

于 2012-04-13T22:24:29.670 に答える
0

これを重複としてフラグ付けしたかったのですが、この回答にはコードがないため、お楽しみください:

// 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;
于 2012-04-13T22:32:38.667 に答える
0

これは非常に簡単で汚いですが、入力の数がわかっている場合は、これでうまくいくはずです。

// 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があるので、アイデアを試して、希望どおりに機能するかどうかを確認できます。

于 2012-04-13T22:23:11.910 に答える
0

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);
});
​&lt;/script>
于 2012-04-13T22:24:22.377 に答える