4

これはおそらく非常に単純ですが、私はますます減少するサークルで走り回っているようです...

給与計算エリアのウェブページを開発しています...

Q. 相互に自動的に更新され、双方向で機能する 2 つのテキスト入力フィールドを持つことは可能ですか? つまり、入力に応じて、一方が他方を更新し、その逆も同様です。

私がここで求めているのは...

従業員の現在の給与がテキスト入力に入力されます

給与計算は、2 つのテキスト入力 (新しい給与または増加率) のいずれかにデータを入力できます。

新しい給与を入力すると、増加率が自動的に更新されるか、増加率を入力すると、新しい給与フィールドが自動的に更新されます

全体的なアイデアは、給与計算でパーセンテージまたは実際の給与のいずれかを使用して新しい数値を計算できるようにすることです

ありがとうフランキーG

4

2 に答える 2

2

入力された値が数値であるという検証を行わない、非常に基本的な実装を次に示します。

window.onload = function() {    
    var currentSal = document.getElementById("current"),
        percentInc = document.getElementById("percent"),
        newSal = document.getElementById("new");

    percentInc.onkeyup = function() {
        newSal.value = currentSal.value * (1 + percentInc.value / 100);
    };
    newSal.onkeyup = function() {
        percentInc.value = (newSal.value - currentSal.value) / currentSal.value * 100;
    };    
};​

これは、HTML マークアップが「current」、「percent」、「new」という要素 ID を使用していることを前提としていますが、明らかにこれらを変更できます。パーセンテージ増加または新しい給与フィールド内の任意のキーアップで、適切な計算を行い、他のフィールドを更新します。すべてがページの onload イベントにあるためdocument.getElementById()、要素を見つけることができます。代わりに、ページの最後にあるスクリプト ブロックに配置することもできます (ただし、そのような関数にすべてが含まれていると、変数は除外されます)。グローバル スコープ)。

デモ: http://jsfiddle.net/5pD​​dM /

于 2012-08-28T22:28:36.407 に答える
0

onChangeメソッドまたはonkeyupのいずれかを実装する必要があります。

どちらも使用可能ですが、ユーザーがフィールドを離れて入力が変更されるとonChangeが起動し、キーを離すたびにonkeyupが起動します（つまり、ボタンを押したままにすると起動しません。離した後のみ起動します）。

その関数の中であなたは次のようなことをすることができます

function salEntered(sal)
{
    document.getElementById("#perc").value = (document.getElementById("#origSal").value / sal )* 100;
}

function percEntered(perc){
    var new_sal = document.getElementById("#origSal").value * ( 1+ perc/100);
    document.getElementById("newSal").value = new_sal;
}

そして、それらを名前付きイベントのいずれかにバインドします。私はpercを全体の10進表記として取りました。

を使用してそれらをバインドします：

<input type="text" id="newSal" onChange="salEntered(document.getElementById('newSal').value)" />

またはonkeyup。

テストできません。後で起きたときにテストします。

間違っている場合は、私を訂正してください。varキーワードを使用すると、変数が関数である正しいスコープに保持されます。

于 2012-08-28T22:48:22.000 に答える