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

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

締切り済みの質問

入力する条件によって文字色・背景色を変えたい

JavaScriptで、入力する数字の条件によって文字色や背景色を変えたいのですが、どのように記述すれば良いでしょうか。

例えば、条件(1)のボックスに入力する数字が100以上の時に、文字色を「白」、背景白を「赤」にしたいのです。

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


<HTML xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<TITLE>計算テスト</TITLE>
</HEAD>
<BODY bgcolor="#FFFFCC">
<FONT SIZE="3">
<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.1*eval(x4);
return b.toFixed(2);}

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


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;

  var ans2 = keisan2(d1.value, d2.value, d3.value, d4.value, s1.value);
  var calc2 = document.fk.calc2;
  calc2 .value = ans2 ;
  if(ans2 >= 0) calc2.style.color = "#e60000";
  if(ans2 >= 0) calc2.style.backgroundColor = "#ffffff";
  if(ans2 >= 1.4) calc2.style.color = "#ffffff";
  if(ans2 >= 1.4) calc2.style.backgroundColor = "#e60000";

  var ans3 = keisan3(d1.value, d2.value);
  var calc3 = document.fk.calc3;
  calc3.value = ans3;
  if(ans3 <180) calc3.style.backgroundColor = "#D5FFCB";
  if(ans3 >=180) calc3.style.backgroundColor = "#FFCC99";
  if(ans3 >=270) calc3.style.backgroundColor = "#FF9999";
}

//-->
</SCRIPT>

<FONT SIZE="5"><B>計算</B></font><BR>
<FORM name="fk">
<FONT SIZE="3">
  ●条件(1):<INPUT size="7" type="text" name="d1" style="text-align:right"><BR>
  ●条件(2):<INPUT size="7" type="text" name="d2" style="text-align:right"><BR>
  ●条件(3):<SELECT name="s1" id="s1" onchange="b();">
<OPTION value="0.1">A</OPTION>
<OPTION value="0.2">B</OPTION>
</SELECT>
<BR>
  ●条件(4):<INPUT size="7" type="text" name="d3" style="text-align:right"><BR>
  ●条件(5):<INPUT size="7" type="text" name="d4" style="text-align:right"><BR>
<BR>
  <INPUT type="button" value="計算開始" onclick="calc()">
<BR>
<BR>
  ◆回答(1):<INPUT size="7" type="text" name="calc1" style="border-color:#000000; border-width:1px; border-style:solid; text-align:right"><BR>
  ◆回答(2):<INPUT size="7" type="text" name="calc2" style="border-color:#000000; border-width:1px; border-style:solid; text-align:right"><BR>
  ◆回答(3):<INPUT size="7" type="text" name="calc3" style="border-color:#000000; border-width:1px; border-style:solid; text-align:right"><BR>
<BR>
</FONT>
</FORM>
</BODY>
</HTML>

投稿日時 - 2015-03-27 08:46:10

QNo.8943706

困ってます

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

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

回答(2)

返信遅くなってすみません。

>例えば、条件(1)のボックスに入力する数字が100以上の時に、文字色を「白」、背景白を「赤」にしたいのです。
これだけやるとしたら、以下でどうですかね。

<script>タグに以下を追加
-------------------ここから
function checkInputCondition(target){
// nameは"d1"などのinputタグのname属性
var name = target.name;
// valueは入力された情報を数値型に変換したもの
var value = Number(target.value);
// nameごとに処理を帰る想定で
switch (name){
//d1の場合
case 'd1':
// isNaN() は数値じゃないものにtrue
// value >= 100は100以上ならtrue
// 下の文はどちらかの条件を満たした場合
if (isNaN(value) || value >= 100){
// inputタグの文字色を変える
target.style.color = "#ffffff";
// inputタグの背景を変える
target.style.backgroundColor = "#e60000";
}else{
// そうじゃない場合はとりあえず戻す
target.style.color = "#000000";
target.style.backgroundColor = "#ffffff";
}
break;
}
}
-------------------ここまで

HTMLを以下に変更
●条件(1):<INPUT size="7" type="text" name="d1" style="text-align:right"><BR>

●条件(1):<INPUT size="7" type="text" name="d1" onKeyUp="checkInputCondition(this)" style="text-align:right"><BR>
または
●条件(1):<INPUT size="7" type="text" name="d1" onChange="checkInputCondition(this)" style="text-align:right"><BR>

---------------------------------------------------------------------------
>もし良ければ質問コードのHTMLについて、どこがおかしいのかご指摘頂けませんか。

・ますは、HTMLなのかXHTMLなのかはっきりしましょう。
<HTML xmlns="http://www.w3.org/1999/xhtml" lang="ja">
xmlnsはxhtmlとして扱うのでなければ不要です。
ほかの箇所もすべてhtml3.2くらいの記述が書かれているようなのでとってしまったほうがいいでしょう。
xhtmlとして扱うなら、タグはすべて小文字、閉じタグは必ずつける。

・FONTタグは文字装飾のためのタグなので、これで全体を囲むのはナンセンスです。
divタグとかにしましょう。

ほか、あげるとたくさんありますが、修正されるならちゃんと勉強なさったほうがいいですね。

投稿日時 - 2015-04-17 14:57:42

質問のコードにある
if(ans2 >= 1.4) calc2.style.color = "#ffffff";
if(ans2 >= 1.4) calc2.style.backgroundColor = "#e60000";
などで、回答の2番目と3番目は動いていますよ。

1番目に適用したいなら
calc1.style.backgroundColor = "#e60000";
などになりますかね。

※ちなみに、HTMLの書き方がむちゃくちゃなので整理したほうがいいです。

投稿日時 - 2015-04-02 14:02:22

お礼

ご回答ありがとうございます。

素人なのでネットで参考になるものを探して試行錯誤しております。
基礎勉強が出来ていないので、トンチンカンな質問になっているかもしれません。
もし良ければ質問コードのHTMLについて、どこがおかしいのかご指摘頂けませんか。よろしくお願い致します。

投稿日時 - 2015-04-09 16:32:22

あなたにオススメの質問