みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

Javaで計算結果によって文字色を変えたい

下記のような計算プログラムを検討しています。
全くの素人なので、ネットで参考になるものを探して、やっとここまで出来ました。

計算結果の値によって文字色を変えたいのですが上手くいきません。
例えば、数値が100以上であれば青、200以上であれば、赤・・・というように設定したいのですが、どのように記述すれば良いでしょうか。

よろしくお願い致します。


<HTML>
<HEAD>
<TITLE>計算</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--
function keisan1(x1,x2){
a=0.2*(eval(x1)/10)*(eval(x1)/10)*Math.sqrt(eval(x2))*1000;
return a.toFixed(0);}

function keisan2(x1,x2,x3,x4,s1){
b=eval(x2)+Math.pow((0.2*(eval(x1)/10)*(eval(x1)/10)*Math.sqrt(eval(x2))),2)*eval(document.getElementById('s1').value)*eval(x3)+0.01*eval(x4);
return b.toFixed(2);}

function keisan3(x1,x2){
c=200*Math.pow((eval(x1)/10),2)*(eval(x2));
return c.toFixed(0);}

//-->
</SCRIPT>

<H3>TEST</H3>

<FORM name="fk">※ 条件を入力して下さい
<BR>
<BR>
条件(1)<SELECT name="s1" id="s1" onchange="b();">
<OPTION value="0.2">A</OPTION>
<OPTION value="0.9">B</OPTION>
</SELECT>
<BR>
条件(2)<INPUT size="10" type="text" name="d1" style="text-align:right"><BR>
条件(3)<INPUT size="10" type="text" name="d2" style="text-align:right"><BR>
条件(4)<INPUT size="10" type="text" name="d3" style="text-align:right"><BR>
条件(5)<INPUT size="10" type="text" name="d4" style="text-align:right"><BR>
<BR>
<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);">
<BR>
回答(1)<INPUT size="10" type="text" name="calc1" style="text-align:right">
<BR>
回答(2)<INPUT size="10" type="text" name="calc2" style="text-align:right">
<BR>
回答(3)<INPUT size="10" type="text" name="calc3" style="text-align:right">

</FORM>
</BODY>
</HTML>

投稿日時 - 2015-03-18 02:20:34

QNo.8937957

困ってます

質問者が選んだベストアンサー

関数にしている理由は『色を変える条件が同じ』だと思ったからです
関数にする事で条件を後で変更する場合1ヶ所の修正ですみます

それぞれで条件が違う場合、関数にする必要はありません。

以下のように修正してください

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も同じような感じで

投稿日時 - 2015-03-18 11:57:10

お礼

すごいですね! 出来ました!
本当にありがとうございます。m(_ _)m
また躓くことがあると思いますので、その時もよろしくお願い致します。
感謝です。

投稿日時 - 2015-03-18 15:11:39

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

スタイルシートで変更します
赤の場合は以下のような感じ
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';
}

(注意)コピペする場合は全角を半角に変換しないとエラーになります
    (インデントに全角を使用しています、半角だと空白がつぶれるため)

投稿日時 - 2015-03-18 08:40:58

お礼

ご回答ありがとうございます。
何時間も悩んでいたのにあっという間に解決出来ました。
記述もスッキリとスマートになりました。本当にありがとうございます。

追加の質問で申し訳ないですが、
最後の // 文字色を与えられた値により変更する関数 のところで、
各計算結果に対して、それぞれ異なる条件で文字色を変えたい場合は、どのように記述すれば良いでしょうか。

下記のように変更してみましたが、ダメでした。
JavaScriptの基礎が判っていないので、試行錯誤になってしまっています。

function changeColor(element, value){
  if(calc2 .value>= 100) element.style.color = 'blue';
  if(calc2 .value>= 200) element.style.color = 'red';
}

よろしくお願い致します。

投稿日時 - 2015-03-18 09:44:47

あなたにオススメの質問