ユーザー操作に基づいて JavaScript を使用して div のコンテンツを動的に変更するにはどうすればよいですか?-jsチュートリアル-php.cn

ユーザー操作に基づいて JavaScript を使用して div のコンテンツを動的に変更するにはどうすればよいですか?

Susan Sarandon

リリース： 2024-10-29 10:54:29

オリジナル

652 人が閲覧しました

How do I dynamically change the content of a div using JavaScript based on user interaction?

JavaScript を使用して Div のコンテンツを変更する方法

JavaScript には、Web ページ上の要素を操作するためのさまざまな方法が用意されています。 divの内容を変更します。簡単な JavaScript コードを使用してこれを実現する方法を示します。

次の HTML コードを考えてみましょう:

<code class="html"><html>
<head>
  <script type="text/javascript">
    function changeDivContent() {
      // ...
    }
  </script>
</head>
<body>
  <input type="radio" name="radiobutton" value="A" onClick="changeDivContent()">
  <input type="radio" name="radiobutton" value="B" onClick="changeDivContent()">
  <div id="content"></div>
</body>
</html></code>

ログイン後にコピー

このコードには、2 つのラジオボタン (A と B) と div があります。 ID は「コンテンツ」です。目的は、ラジオボタンの 1 つが選択されたときに "content" div のコンテンツを変更することです。

これを実現するには、content 要素の innerHTML プロパティを使用します。方法は次のとおりです。

<code class="javascript">document.getElementById("content").innerHTML = "whatever";</code>

ログイン後にコピー

「A」または「B」ラジオボタンを選択すると、changeDivContent() 関数が呼び出されます。この関数では、コンテンツ要素の innerHTML プロパティを目的のテキストに設定できます。例:

<code class="javascript">function changeDivContent() {
  if (document.getElementById("radiobuttonA").checked) {
    document.getElementById("content").innerHTML = "Content for A";
  } else if (document.getElementById("radiobuttonB").checked) {
    document.getElementById("content").innerHTML = "Content for B";
  }
}</code>

ログイン後にコピー

このコードは、どのラジオボタンが選択されているかを確認し、それに応じて「content」div の内容を変更します。 innerHTML 値を、表示したいテキストでカスタマイズできます。この手法を使用すると、ユーザーの操作に基づいて div のコンテンツを動的に変更し、よりインタラクティブな Web ページを作成できます。

以上がユーザー操作に基づいて JavaScript を使用して div のコンテンツを動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。