JavaScript01 : クリックで実現する基本的な動き

JavaScriptコード解説（全体）

// ボタンの要素を取得
const toggleButton = document.getElementById("toggleButton");

// ボタンの状態を記録する変数
let isStyled = false;

// ボタンをクリックしたときの動作を設定
toggleButton.addEventListener("click", () => {
  if (isStyled) {
    toggleButton.textContent = "スタイルを変更";
    toggleButton.style.backgroundColor = "";
    toggleButton.style.color = "";
  } else {
    toggleButton.textContent = "元に戻す";
    toggleButton.style.backgroundColor = "black";
    toggleButton.style.color = "white";
  }
  isStyled = !isStyled; // 状態を反転させる
});

まずボタンの状態を記録する

let isStyled = false;

ボタンの現在の状態を記録するための変数です。初期状態はスタイルが変更されていない（false）とします。

次にクリック時の動作を設定する

toggleButton.addEventListener("click", () => {
  // 動作の内容
});

ボタンがクリックされたときに実行する動作を設定します。

その中で条件分岐でスタイルを変更する

if (isStyled) {
  toggleButton.textContent = "スタイルを変更";
  toggleButton.style.backgroundColor = "";
  toggleButton.style.color = "";
} else {
  toggleButton.textContent = "元に戻す";
  toggleButton.style.backgroundColor = "black";
  toggleButton.style.color = "white";
}
isStyled = !isStyled;

• if文
  • 現在の状態（isStyled）に応じて、スタイルやテキストを切り替えます。
• textContent
  • textContent関数を使って、ボタンのテキストを変更します。
• style.backgroundColorとstyle.color
  • CSSプロパティを直接変更します。
• isStyled = !isStyled
  • 状態を反転させることで、次回クリック時に逆の動作をします。

JavaScriptコード解説（全体）

// ボタンの要素を取得
const addElementButton = document.getElementById("addElementButton");

// クリック回数をカウントする変数
let clickCount = 0;

// ボタンをクリックしたときの動作を設定
addElementButton.addEventListener("click", () => {
  clickCount += 1; // クリック回数を1増やす

  // 新しい段落要素を作成
  const newElement = document.createElement("p");
  newElement.textContent = `${clickCount}回目のクリックです！`;

  // 作成した要素を画面に追加
  const container = document.getElementById("container");
  container.appendChild(newElement);
});

まずボタンを取得する

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

次にクリック回数をカウントする

let clickCount = 0;

ここでクリックイベントを設定する

addElementButton.addEventListener("click", () => {
  clickCount += 1; // クリック回数を1増やす
});

その場所に新しい要素を作成してテキストを設定する

const newElement = document.createElement("p");
newElement.textContent = `${clickCount}回目のクリックです！`;

最後に新しい要素を画面に追加する

const container = document.getElementById("container");
container.appendChild(newElement);