1

計算結果がマイナスなら赤に変えたい。スタイル シートを試し、出力を JavaScript 呼び出しに入れましたが、うまくいかないようでした。以下のコード例のhtml 5出力「o」の色を、負の場合は赤に、正の場合は緑に変更する方法はありますか?

form oninput="o.value = a.valueAsNumber + b.valueAsNumber"
input name="a" id="a" type="number" step="any" +
input name="b" id="b" type ="number" step="any" =
出力名="o" for="ab">

/形

4

1 に答える 1

1

ユーザーが最初に試したことを示していないときに答えを出すのは好きではありませんが、これは実際には少し楽しかったです。このタイプのフォームはこれまで見たことがありません。

@feeela が言ったように、JS を使用して入力の変更を監視し、それに応じて出力フィールドを検証できます。私はこれを次のように行うためにjQueryを使用しています：

$(document).ready(function() {
    $('input').change(
        function()
        {
            $('output').removeAttr('class');
            var sum = parseInt($('output').first().html());
            if (isNaN(sum))
            {
                $('output').addClass('error');
            }
            else if (sum < 0)
            {
                $('output').addClass('negative');
            }
            else if (sum > 0)
            {
                $('output').addClass('positive');
            }
        }
    );
});

次に、スタイル シートを使用して、クラスに応じて出力フィールドに色を付けることができます。ここでデモを見ることができます: http://jsfiddle.net/S7cVP/

于 2012-12-12T23:56:28.587 に答える