jsでチェックボックスの状態によって背景色を変える

JavaScript苦手すぎるのでメモ。
かなり基礎的な部分から説明しているので初心者向けです

やりたいこと

チェックボックスがオンの時　→　背景色青
チェックボックスがオフの時　→　背景色無色
にする

サンプルコード

index.html

   <main>
      <p id="text">ここの背景色が変わります。</p>
      <div class="mt-ios">
        <input id="check" type="checkbox" />
        <label for="check"></label>
      </div>
    </main>

id=textの部分の背景を変えていきます。

check.js

const check = document.getElementById("check"); /*checkの情報を取得*/
check.addEventListener("change", changeBackgroundColor);

function changeBackgroundColor() {
  if (check.checked) {
    document.getElementById("text").style.backgroundColor = "blue";
  } else {
    document.getElementById("text").style.backgroundColor = "transparent";
  }
}

getElementedById()

getElementById() は Document インターフェイスのメソッドで、 ()の中にidに入っている文字を入れることでidの部分を取得してくれる。
例えば、

const check = document.getElementById("check");

だったら、()の中に"check"が入っているので、<input id="check" type="checkbox" />　の部分を取得してきてくれる。ちなみにcheck.checkedでcheckされてるかどうかわかる。

• checkされてるとき→trueを返す
• ckeckされてないとき→falseを返す

document.getElementById("text").style.backgroundColor = blue;

だったら、document.getElementById("text")で、<p id="text">ここの背景色が変わります。</p>が取得されて、style.でtextの部分のスタイル（css）を指定。要するに、textの部分のbackgroundColorを指します。

これと同じ

style.css

#text{
        background-color: blue;
     }

ちなみに、背景色を無色にするには、background-color: transparent で指定します。noneじゃないんですね。

addEventListener()

addEventListener()はJavaScriptからさまざまなイベント処理を実行することができるメソッドのこと。ボタンが押されたらこういう処理をしたい！とか○○されたらこうしたい！って時に使われそう（まだそんな使ったことないけど。）

書き方
対象要素.addEventListener( イベントの種類, 関数名（行いたい処理）)

イベントの種類はscrollとかclickとかいろいろあります。
詳しくは

に書いてあったので気になる方は見てみて下さい。

今回は、checkがの状態がchangeしたときに行いたい処理を書いていくので、
check.addEventListener("change", changeBackgroundColor);
と記述していきます。

ここで、changeBackgroundColorは関数名。この関数の中に行いたい処理（今回は背景色によって色を変えていく処理）を」書きます。

あとはif文使って記述していけばOK

参考記事