JavaScriptを使用してボタンのクリック時に色を変更する方法

// HTMLのボタン要素を取得する
var button = document.getElementById("myButton");
// クリックイベントリスナーを追加する
button.addEventListener("click", function() {
  // ボタンの色を変更する
  button.style.backgroundColor = "red";
});

方法2:直接onclick属性を使用する方法

// HTMLのボタン要素にonclick属性を追加する
<button id="myButton" onclick="changeColor()">ボタン</button>
// JavaScriptで色を変更する関数を定義する
function changeColor() {
  // ボタンの色を変更する
  document.getElementById("myButton").style.backgroundColor = "blue";
}

方法3:クラスを切り替える方法

// HTMLのボタン要素を取得する
var button = document.getElementById("myButton");
// クリック時にクラスを切り替える関数を定義する
function toggleColor() {
  // ボタンのクラスを切り替える
  button.classList.toggle("red-button");
}
// CSSでクラスに関するスタイルを定義する
.red-button {
  background-color: red;
}

これらの方法を使用することで、ボタンがクリックされたときに色を変更することができます。必要に応じて、CSSを使用して他のスタイルプロパティ（例:テキスト色、ボーダー色など）も変更できます。