0

この質問に対する基本的な答え (私が期待しているもの) を Web で検索しました。

特定のシステム用にまとめた HTML フォームがあります。ユーザーが 2 つの温度を入力する 2 つのテキスト フィールドがあります。onBlur がこれら 2 つの温度の差を生成する 3 番目のテキスト フィールドが必要です。正しい方向に向かっていると思われるスクリプトがありますが、機能しません。これを使用するシステムのため、HTML にタグを含めることができません。

私のスクリプト：

    <script language="javascript" type="text/javascript">
    <!--
    function calculate_temp(TempIn, TempOut) {
    var TempIn = parseInt(document.getElementById('TempIn').value);
    var TempOut   = parseInt(document.getElementById('TempOut').value); 
    var Delta = TempIn - TempOut;
    document.getElementById('Delta').innerHTML = Delta
    }
    // -->
    </script>

私のHTML：

    <body> 
    <div> 
    <p><label for="TempIn">TempIn: </label><input type="text" name="TempIn" id="TempIn" /></p>
    <p><label for="TempOut">TempOut: </label><input type="text" name="TempOut" id="TempOut" /></p>
    <p><label for="Delta">Delta: </label> <input type="text" name="Delta" id="Delta" onBlur="calculate_temp(this.form.TempIn.value, this.form.TempOut.value)"/></p>
    </div> 
    </body>

ここで私が間違っていることを誰かが説明できますか? ここでも、TempIn を入力し、Tab を押し、TempOut を入力し、Tab を押すと、Delta が自動的に計算されます。

私が言ったように、私がオンラインで見つけたすべてのリソースはわずかに異なる方法でそれを行いますが、いずれかのアプローチを使用すると機能しないようです.

どんな助けでも大歓迎です。ありがとう。

4

6 に答える 6

3

にinputは がありませんinnerHTML。値を使用する必要があります。

document.getElementById('Delta').value = Delta

また、常にparseInt基数である2 番目のパラメーターを渡します。そうしないと、間違った基数を推測することがよくあります。

于 2012-05-08T19:48:13.393 に答える
2
  1. スクリプト内のコメントを削除します: .
  2. XHTML では、すべてのタグと属性名は小文字にする必要があります (オプション)。すなわち: onblur。
  3. 予想される動作については、onfocusイベントを使用することをお勧めします。より理にかなっています。
  4. スクリプトを介して要素にアクセスできる場合は、 calculate_temp() 関数に何も渡す必要はありません。
  5. Deltaプロパティで入力の値を変更しvalueます。

結果：

<head>

<title>Untitled 1</title>

    <script language="javascript" type="text/javascript">
        function calculate_temp(TempIn, TempOut) {
            var TempIn = parseInt(document.getElementById('TempIn').value);
            var TempOut   = parseInt(document.getElementById('TempOut').value); 
            var Delta = TempIn - TempOut;
            document.getElementById('Delta').value = Delta
        }   
    </script>

</head>

<body>

    <div> 
    <p><label for="TempIn">TempIn: </label><input type="text" name="TempIn" id="TempIn" /></p>
    <p><label for="TempOut">TempOut: </label><input type="text" name="TempOut" id="TempOut" /></p>
    <p><label for="Delta">Delta: </label> <input type="text" name="Delta" id="Delta" onfocus="calculate_temp()"/></p>
    </div> 

</body>
于 2012-05-08T20:00:01.330 に答える
1

リングに帽子を投げます....

html:

    <div> 
        <p><label for="TempIn">TempIn: </label><input type="text" name="TempIn" id="TempIn"/></p>
        <p><label for="TempOut">TempOut: </label><input type="text" name="TempOut" id="TempOut" /></p>
        <p><label for="Delta">Delta: </label> <input type="text" name="Delta" id="Delta"/></p>
    </div> ​​​​

js:

/* store elements */
var TempIn = document.getElementById('TempIn'),
    TempOut = document.getElementById('TempOut'),
    Delta = document.getElementById('Delta');

function calculate_temp() {
    Delta.value = parseInt(TempIn.value,10) - parseInt(TempOut.value,10);
}

/* unobtrusive onblur */
TempIn.onblur = calculate_temp;
TempOut.onblur = calculate_temp;
Delta.onblur = calculate_temp;

ここにフィドルがあります: http://jsfiddle.net/JKirchartz/TbHW3/

EDITはおそらく言及する必要があります.このJSは</body>タグのすぐ上にあるか、DOMがロードされたときに実行する必要があります.

于 2012-05-08T20:01:02.500 に答える
0

これを試して

脚本：

<script language="javascript" type="text/javascript">
<!--
function calculate_temp() {
var TempIn = parseInt(document.getElementById('TempIn').value);
var TempOut   = parseInt(document.getElementById('TempOut').value); 
var Delta = TempIn - TempOut;
document.getElementById('Delta').value = Delta;
}
// -->
</script>

html：

<body> 
<div> 
<p><label for="TempIn">TempIn: </label><input type="text" name="TempIn" id="TempIn" /></p>
<p><label for="TempOut">TempOut: </label><input type="text" name="TempOut" id="TempOut" /></p>
<p><label for="Delta">Delta: </label> <input type="text" name="Delta" id="Delta" onBlur="calculate_temp()"/></p>
</div> 
</body>
于 2012-05-08T19:53:55.833 に答える
0 
    <div> 
        <p><label for="TempIn">TempIn: </label><input type="text" name="TempIn" id="TempIn" onBlur="calculate_temp(document.getElementById('TempIn').value, document.getElementById('TempOut').value);"/></p>
        <p><label for="TempOut">TempOut: </label><input type="text" name="TempOut" id="TempOut" onBlur="calculate_temp(document.getElementById('TempIn').value, document.getElementById('TempOut').value);"/></p>
        <p><label for="Delta">Delta: </label> <input type="text" name="Delta" id="Delta" /></p>
    </div>
    <script language="javascript" type="text/javascript">
        <!--
        function calculate_temp(TempIn, TempOut) {

        var Delta = TempIn - TempOut;
        document.getElementById('Delta').value = Delta
        }
    // -->
    </script>
于 2012-05-08T19:54:39.733 に答える
0

問題のOnBlurコントロールがフォーカスを失ったときにイベントが発生するため、コードは、ユーザーがフォーカスをDelta入力から離したときにのみ呼び出されます。TempOut入力がフォーカスを失ったときに呼び出されるようにするため、イベント処理を設定する必要があります。

<p><label for="TempIn">TempIn: </label><input type="text" name="TempIn" id="TempIn" /></p>
<p><label for="TempOut">TempOut: </label><input type="text" name="TempOut" id="TempOut" onBlur="calculate_temp(this.form.TempIn.value, this.form.TempOut.value)"/></p>
<p><label for="Delta">Delta: </label> <input type="text" name="Delta" id="Delta" /></p>
于 2012-05-08T19:51:07.027 に答える