JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでテキストを切り替える（トグルする）方法を解説

JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。

実装コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .textDiv {
      font-size: 20px;
      background-color: rgb(199, 228, 157);
      width: 100%;
      padding: 15px;
      font-weight: bold;
   }
   .toggleBtn {
      padding: 15px;
      border: none;
      background-color: rgb(106, 41, 153);
      color: white;
      font-size: 18px;
   }
</style>
</head>
<body>
<h1>Toggle Text example</h1>
<button class="toggleBtn">Click Me</button>
<h2>Click on the above button to toggle below text</h2>
<div class="textDiv">Old Text</div>
<script>
   // ボタンがクリックされるたびにtoggleText関数を呼び出す
   document.querySelector(".toggleBtn").addEventListener("click", toggleText);
   function toggleText() {
      var x = document.querySelector(".textDiv");
      // 現在のテキストが「Old Text」なら「New Text」へ、そうでなければ「Old Text」へ切り替え
      if (x.innerHTML === "Old Text") {
         x.innerHTML = "New Text";
      } else {
         x.innerHTML = "Old Text";
      }
   }
</script>
</body>
</html>

コードのポイント

  • querySelector()メソッドで、ボタン要素とテキストを表示するdiv要素をそれぞれ取得しています。
  • addEventListener()でクリックイベントを登録し、ボタンが押されるたびにtoggleText()関数が実行されます。
  • if文で現在のテキストが「Old Text」かどうかを判定し、「New Text」と交互に書き換えることで切り替えを実現しています。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptでテキストを切り替える（トグルする）方法を解説

「Click Me」ボタンをクリックすると、テキストが「New Text」に切り替わります。

JavaScriptでテキストを切り替える（トグルする）方法を解説

もう一度クリックすると、元の「Old Text」に戻ります。このようにクリックのたびに状態を反転させる処理は「トグル」と呼ばれ、表示・非表示の切り替えやアコーディオンメニューなど、さまざまなUIの実装に応用できる基本的なテクニックです。

  1. JavaScriptで要素の表示・非表示を切り替える方法をわかりやすく解説

    Webページの開発では、ボタンのクリックに応じて特定の要素を表示したり非表示にしたりする「トグル（切り替え）処理」は非常によく使われるテクニックです。JavaScriptを使えば、style.displayプロパティの値を動的に変更することで、簡単にこの機能を実装できます。 本記事では、ボタンをクリックするたびにdiv要素の表示と非表示が切り替わるサンプルコードを紹介します。 実装のポイント 要素の表示・非表示の切り替えは、以下の手順で行います。 document.querySelector()で対象の要素を取得する addEventListener(click, ...)でボタンのクリック

  2. JavaScriptで<strong>タグにテキストを設定する方法

    Webページ上のテキストを動的に書き換えたい場面は多くあります。この記事では、jQueryを使用して<strong>タグ内のテキストをJavaScriptで変更する方法を、手順とコード例とともにわかりやすく解説します。手順1：<strong>要素を用意するまず、HTML内にテキストを差し替えたい<strong>要素を配置します。後からJavaScript側でこの要素を指定できるよう、id属性を付けておくのがポイントです。<strong id="strongDemo">Replace This strong tag</st