JavaScriptと仲良くなろう

はじめに

jQueryなどJavaSriptをより扱いやすくしてくれる便利なファイルはありますが、
理解を深めるためにも今回は便利なものは使用せず、一からコードを記述することにしました。

チェックボタンを押すと対応する3色のボタンが表示される機能を作ります。

HTML

code.html

<div class="all_section">
    <div class="color">
      <p>Check-Box</p>
      <div class="Check_word">チェック</div>
    </div>
  <div class="list">
    <!--チェック機能の作成-->
    <div class="section">
      <input type="checkbox" id="check_one1" data-name="あか">赤</input>
      <input type="checkbox" id="check_one2" data-name="あお">青</input>
      <input type="checkbox" id="check_one3" data-name="きいろ">黄色</input>
    </div>
  </div>
    <!--チェック機能に対応するボタンを作成-->
    <div class="images">
      <input type="button" class="one1" data-name="あか"/>
      <input type="button" class="one2" data-name="あお"/>
      <input type="button" class="one3" data-name="きいろ"/>
    </div>
</div>

CSS

code.css

/*全体への装飾*/
.all_section {
  width: 100%;
  background-color: white;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/*タイトル画面の装飾*/
.color {
  overflow: hidden;
  margin-top: -20px;
  height: 200px;
  background-color: #3c3d3d9a;
  color: antiquewhite;
  border-radius: 40px;
}
/*タイトル画面の文字への装飾*/
.color p {
  margin-top: 80px;
  font-size: 25px;
}
/*チェック機能部分の装飾*/
.list {
  width: 100%;
  margin-top: 100px;
  font-size: 20px;
  color: antiquewhite;
  border-radius: 20px;
  background-color: #9cce8b;
}
/*チェックの装飾*/
.list input {
  margin: 10px;
  color: #3c3d3d9a;
  border-radius: 20px;
}
/*ボタン機能の装飾*/
.images input {
  width: 100px;
  height: 100px;
  margin-top: 100px;
  margin-left: 10px;
  margin-right: 10px;
}
/*赤ボタンの装飾*/
.one1 {
  background-color: #fa1919;
}
/*青ボタンの装飾*/
.one2 {
  background-color: #1900ff;
}
/*黄色ボタンの装飾*/
.one3 {
  background-color: #fbff04;
}

JavaScript

code.js

// 画面の対象の画像を全て隠す関数
function hideAllImages() {
  const images_off = document.querySelectorAll('.images input');
  images_off.forEach(function (image) {
    //画像を非表示
    image.style.visibility = "hidden";
  });
}

// 値が変更された時に呼ばれる関数
function onChangeValue() {
  // 全ての画像を非表示
  hideAllImages();

  //input（チェックボタン）のデータをすべて取得
  const sec_checkboxes = document.querySelectorAll('.section input');
  //imagesのデータをすべて取得
  const all_images = document.querySelectorAll('.images input');

  //1つずつ取得したデータのdata-nameを１つずつ取得
  sec_checkboxes.forEach(function (checkbox) {
    const checkbox_name = checkbox.dataset.name;

    //その中でもしチェックされていたらimagesデータを取得
    if (checkbox.checked) {
      all_images.forEach(function (image) {
        const image_name = image.dataset.name;

        //該当のdata-nameがあったら表示
        if (image_name.indexOf(checkbox_name) >= 0) {
          image.style.visibility = "visible";
        }
      });
    }
  });
}

// 画面を読み込んだときに呼ばれる関数
function onLoad() {
  // 全て非表示
  hideAllImages();

  //  値が変更された時に呼ばれる関数(イベントを登録する)
  document.addEventListener("change", onChangeValue);
}
//ウィンドウがロードした時に起動
window.addEventListener("load", onLoad);

完成

左から　赤をチェック　赤と青をチェック　赤と青と黄色すべてをチェックした時です。

まとめ

基本的なことですが、コードが長くなるので自分で書いたコードにはメモをこまめに記載する。
関数を作って細かく分けてわかりやすくなるように心がけると見直した時に助かります。
今回の記事を書くために見直したときに改めて大切だと思いました。