５色で表してみる　JavaScript　if文活用 - 猫と遊ぶ　見習いプログラマーの備忘録

嵐、岸くんのいないキンプリ、オリンピック、そうめん　を題材に。

今回もJSで条件分岐を用いて、

クリックして、入力する度にカラーが変わるってのをプログラムしてみた。

実際に動かしてみる。

「カラーで表したいのは？」をクリック

f:id:msm20-chocolateee:20180821181654p:plain

クリックすると、聞いてくるので順に答える。

f:id:msm20-chocolateee:20180821181819p:plain

嵐　ドーン！

f:id:msm20-chocolateee:20180821181918p:plain

カラーを説明すると、
紫　→　松潤
緑　→　相葉ちゃん
赤　→　櫻井くん
黄　→　ニノ
青　→　大野くん
と、なっている。

岸くんのいないキンプリ　ドーン！

f:id:msm20-chocolateee:20180821182155p:plain

こちらは以前に紹介したが、一応。
ひまわりイエロー　→　髙橋海人
漆黒　→　永瀬廉
真紅　→　平野紫耀
 ターコイズブルー　→　神宮寺勇太
濃いピンク　→　岩橋玄樹

オリンピック　ドーン！

f:id:msm20-chocolateee:20180821182218p:plain

オリンピックカラーの意味はよくわからない。笑

そうめん　ドーン！

f:id:msm20-chocolateee:20180821182240p:plain

そうめんに、５色そうめんってのがあるみたい。鮮やか～
読み方は「ごしきそうめん」。
そしてさいごに目に優しい(笑)

ちなみに、そうめんの色ついて、
通常の色以外のは、
ピンク　→　梅肉
茶　→　そば粉
緑　→　抹茶
黄　→　たまご
が練りこまれてあるみたい。

ちゃんと自然なものから色付けされていてよい◎

ソースコードはこちら。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>色の連想</title>
// テーブルの配置
  <style>
    body {
      text-align: center;
    }

    table {
      border-collapse: collapse;
      margin: auto;
    }

    td {
      border: 1px solid;
      width: 450px;
      height: 100px;
    }
  </style>
</head>

<body>
  <table>
    <caption id="cap">５つのカラーで表そう</caption>
    <tr>
      <td id="top"></td>
    </tr>
    <tr>
      <td id="middle_top"></td>
    </tr>
    <tr>
      <td id="middle"></td>
      <tr>
        <td id="middle_low"></td>
      </tr>
      <tr>
        <td id="low"></td>
  </table>
  <br>
  // changeCol　←関数
  <input type="button" value="カラーで表したいのは？" onclick="changeCol()">
  <script>
    function changeCol() {
      var cap = document.getElementById("cap");
      var topp = document.getElementById("top");
      var middlee_top = document.getElementById("middle_top");
      var middlee = document.getElementById("middle");
      var middlee_low = document.getElementById("middle_low");
      var loww = document.getElementById("low");

      var color = prompt("次のうち、色で表したいのは？\n 嵐、岸くんのいないキンプリ、オリンピック、そうめん", "");
      <!-- textContentは要素内の文字列を書き換える関数 -->
      cap.textContent = color;

      if (color == "嵐") {
        topp.style.backgroundColor = "#9900CC";
        middlee_top.style.backgroundColor = "#00BB00";
        middlee.style.backgroundColor = "#EE0000";
        middlee_low.style.backgroundColor = "#FFFF00";
        low.style.backgroundColor = "#0000FF";
      }
      else if (color == "岸くんのいないキンプリ") {
        topp.style.backgroundColor = "yellow";
        middlee_top.style.backgroundColor = "black";
        middlee.style.backgroundColor = "red";
        middlee_low.style.backgroundColor = "#00ECFF";
        low.style.backgroundColor = "#FF1493";
      }
      else if (color == "オリンピック") {
        topp.style.backgroundColor = "#1E90FF";
        middlee_top.style.backgroundColor = "yellow";
        middlee.style.backgroundColor = "black";
        middlee_low.style.backgroundColor = "#00CC00";
        low.style.backgroundColor = "red";
      }
      else if (color == "そうめん") {
        topp.style.backgroundColor = "#FFFFF0";
        middlee_top.style.backgroundColor = "#FFBEDA";
        middlee.style.backgroundColor = "#D2B48C";
        middlee_low.style.backgroundColor = "#99CC33";
        low.style.backgroundColor = "#FFFF88";
      }
      else {
        alert("入力できるのは、嵐、岸くんのいないキンプリ、オリンピック、そうめん　のいずれかです。");
      }
    }
  </script>
</body>

</html>