izumiportfolio & notes

クリックしてテキストを変更

ここが変更されるテキストです

---

以下は後学のためのメモです。勉強記録として残しています。

<button id="btn" class="btn">クリックしてテキストを変更</button>

<p id="text">ここが変更されるテキストです</p>

<script>
const btn = document.getElementById("btn");

⇒関数btnの定義：htmlの中からIDbtnを探してくる

btn.addEventListener("click", () => {
  document.getElementById("text").textContent = "あけましておめでとうございます！";
});
⇒addEventListener：イベント処理を実行したい場合に使用するメソッド
⇒.textContent：HTMLの解釈なしで文字として出力するプロパティ
　→innerHTML　だとHTMLを解釈する

</script>

innerHTML版

ここが変更されるテキストです

---

クリックで文字を切り替えたくなったので、挑戦してみる

切り替え

ここが変更されるテキストです

<button id="btn03" class="btn">切り替え</button>
<p id="text03" class="message">ここが変更されるテキストです</p>


document.addEventListener("DOMContentLoaded", () => {
⇒　HTMLがすべて読み込まれた後にJSを実行するための準備

  const btn03 = document.getElementById("btn03");
  const text03 = document.getElementById("text03");

  btn03.addEventListener("click", () => {
    text03.classList.toggle("is-active");

⇒toggle()：クラスを ON / OFF 切り替えるメソッド
is-active クラスを

・あれば削除
・なければ追加

    text.textContent = text03.classList.contains("is-active")

⇒.contains（）：その要素が、そのクラスを持っているか？を調べるメソッド
is-active クラスが歩かないかチェック

      ? "あけましておめでとうございます！"
      : "ここが変更されるテキストです";
  });
});