JavaScriptを使用してボタンのテキストを変更する方法


  1. HTMLのボタン要素に直接テキストを設定する方法:
<button id="myButton">クリックしてください</button>
<script>
  // ボタンのテキストを変更する関数
  function changeButtonText() {
    var button = document.getElementById("myButton");
    button.innerText = "クリックされました";
  }
// ボタンにクリックイベントリスナーを追加
  var button = document.getElementById("myButton");
  button.addEventListener("click", changeButtonText);
</script>
  1. JavaScriptの関数を使用してボタンのテキストを変更する方法:
<button id="myButton">クリックしてください</button>
<script>
  // ボタンのテキストを変更する関数
  function changeButtonText() {
    var button = document.getElementById("myButton");
    button.innerHTML = "クリックされました";
  }
// ボタンにクリックイベントリスナーを追加
  var button = document.getElementById("myButton");
  button.addEventListener("click", changeButtonText);
</script>
  1. ボタンのテキストを変数で管理し、JavaScriptでその変数の値を変更する方法:
<button id="myButton">クリックしてください</button>
<script>
  // ボタンのテキストを管理する変数
  var buttonText = "クリックしてください";
  // ボタンのテキストを変更する関数
  function changeButtonText() {
    var button = document.getElementById("myButton");
    button.innerText = buttonText;
  }
// ボタンにクリックイベントリスナーを追加
  var button = document.getElementById("myButton");
  button.addEventListener("click", changeButtonText);
</script>

これらはいくつかの基本的な方法ですが、JavaScriptを使用してボタンのテキストを変更するためのさまざまな方法があります。必要に応じてこれらのコード例をカスタマイズして使用することができます。