計算結果によって文字の色を変える
2023年7月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回は「計算結果によって文字の色を変える」JavaScriptに挑戦してみました。
電卓をつくってみよう
ただのinputやoutputじゃつまらないので、電卓を作ってみました。
参考:ウェブカツ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秒だそうです。
みなさんもオリジナルの電卓を作ってみてください。