- ベストアンサー
Javaで計算結果によって文字色を変えたい
- Javaを使用して、計算結果の値によって文字色を変える方法を検討しています。
- 現在、素人なので、ネットで参考になる情報を探して実装しようとしています。
- 具体的な要件としては、数値が一定の範囲に入った場合に、文字色を変えたいということです。
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
関数にしている理由は『色を変える条件が同じ』だと思ったからです 関数にする事で条件を後で変更する場合１ヶ所の修正ですみます それぞれで条件が違う場合、関数にする必要はありません。 以下のように修正してください var ans1 = keisan1(d1.value, d2.value); var calc1 = document.fk.calc1; calc1.value = ans1; // changeColor(calc1, ans1); // これをやめる if(ans1 >= 100) calc1.style.color = 'blue'; if(ans1 >= 200) calc1.style.color = 'red'; // calc2も3も同じような感じで
その他の回答 (1)
- byDesign
- ベストアンサー率75% (45/60)
スタイルシートで変更します 赤の場合は以下のような感じ element.style.color = 'red'; // element.style.color = "#FF0000"; でもOK （別の方法で、クラスの付け替えで行うという方法もあります。この方法は興味があれば調べると良いと思います） 具体的には、以下の変更をしてみてください <INPUT type="button" value="計算開始" onclick="document.fk.calc1.value=keisan1(document.fk.d1.value,document.fk.d2.value);document.fk.calc2.value=keisan2(document.fk.d1.value,document.fk.d2.value,document.fk.d3.value,document.fk.d4.value,document.fk.s1.value);document.fk.calc3.value=keisan3(document.fk.d1.value,document.fk.d2.value);"> を <INPUT type="button" value="計算開始" onclick="calc()"> に変更(この変更は見やすくする為) SCRIPTに以下の関数を追加 function calc(){ // ← 計算ボタンが押されたらこの関数が呼ばれる var d1 = document.fk.d1; var d2 = document.fk.d2; var d3 = document.fk.d3; var d4 = document.fk.d4; var s1 = document.fk.s1; var ans1 = keisan1(d1.value, d2.value); var calc1 = document.fk.calc1; calc1.value = ans1; changeColor(calc1, ans1); var ans2 = keisan2(d1.value, d2.value, d3.value, d4.value, s1.value); var calc2 = document.fk.calc2; calc2 .value = ans2 ; changeColor(calc2 , ans2 ); // 以下calc3も同様 } // 文字色を与えられた値により変更する関数（100以上は青、200以上は赤） function changeColor(element, value){ if(value>= 100) element.style.color = 'blue'; if(value>= 200) element.style.color = 'red'; } （注意）コピペする場合は全角を半角に変換しないとエラーになります (インデントに全角を使用しています、半角だと空白がつぶれるため)
お礼
ご回答ありがとうございます。 何時間も悩んでいたのにあっという間に解決出来ました。 記述もスッキリとスマートになりました。本当にありがとうございます。 追加の質問で申し訳ないですが、 最後の // 文字色を与えられた値により変更する関数 のところで、 各計算結果に対して、それぞれ異なる条件で文字色を変えたい場合は、どのように記述すれば良いでしょうか。 下記のように変更してみましたが、ダメでした。 JavaScriptの基礎が判っていないので、試行錯誤になってしまっています。 function changeColor(element, value){ if(calc2 .value>= 100) element.style.color = 'blue'; if(calc2 .value>= 200) element.style.color = 'red'; } よろしくお願い致します。
お礼
すごいですね！ 出来ました！ 本当にありがとうございます。m(_ _)m また躓くことがあると思いますので、その時もよろしくお願い致します。 感謝です。