計算結果によって文字の色を変える

Web

2023年7月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「計算結果によって文字の色を変える」JavaScriptに挑戦してみました。

電卓をつくってみよう

ただのinputやoutputじゃつまらないので、電卓を作ってみました。

参考：JavaScript素材集｜電卓（電子計算機）

参考：ウェブカツBLOG｜JavaScriptを使用した簡単な電卓の作り方【サンプルコード＋解説付き】

参考：GXY-life｜【HTML】【CSS】【javascript】電卓の作り方

参考：シンス株式会社｜【jQuery】ページにアクセスするたびランダムで異なる背景色・背景画像にしたいときの方法

～ぼくのかんがえたさいきょうのでんたく～

・ルー〇ックキューブ風の配色です。

・画面をリロードするたびにランダムでボタンの色が変わります。

・あるボタンを押すと色が揃います。

・あるボタンを押すとまたバラバラになります。

スタイルを変える

電卓の計算結果の部分は以下のようになっています。

<input type="text" id="result" class="result" name="txt" readonly>

getElementByIdを使って、resultのスタイル（文字色とか背景色とか）を変えることができます。

var result = document.getElementById("result");
result.style.color = "blue";
result.style.backgroundColor = "red";

他にもgetElementByClassNameとか、getElementsByNameとか、querySelectorAllとかいろいろ方法はあるみたいです。

if文

さてようやく本題です。

「計算結果が10000以上の場合に文字の色を赤くする」スクリプトを書いてみます。

var result = document.getElementById("result");
if(result.value >= 10000){
  result.style.color = "red";
}

>= は比較演算子というそうです。

これは左辺≧右辺だとtrueを返す、という意味だそうです。

if文は条件を追加することができます。

「計算結果が10000以上の場合に赤」「1000以上の場合はオレンジ」「それ以外は白」だとどうなるでしょう。

var result = document.getElementById("result");
if(result.value >= 10000){
  result.style.color="red";
}else if(result.value >= 1000){
  result.style.color="orange";
}else{
  result.style.color="white";
}

else if～でどんどん条件を足していくことができます。

上の電卓ではさらに「100以上だと緑」「10以上だと青」を追加しています。

まとめ

ルービックキューブ早解きの世界記録は4.90秒だそうです。

みなさんもオリジナルの電卓を作ってみてください。

この記事を書いた人

みやの

Web・DTP担当

We Blog Weblog