JavaScript を使用して Div コンテンツを動的に更新する方法: ラジオ ボタンを使用したガイド

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

JavaScript を使用して div 要素のコンテンツを変更することは、Web 開発における一般的なタスクです。この記事では、div に「value」属性がない場合でも、関連する手順を説明します。

次の HTML コードがあると想像してください。

<code class="html"><div id="content"></div>
<input type="radio" name="radiobutton" value="A" onClick="changeDivContent()">
<input type="radio" name="radiobutton" value="B" onClick="changeDivContent()"></code>

次のことができるようにしたいと考えています。 「A」または「B」ラジオ ボタンを選択して、div 要素のコンテンツを変更します。

div には「value」属性がないため、要素の innerHTML プロパティを使用できます。

次の JavaScript 関数はこれを実現します:

<code class="js">function changeDivContent() {
  let selectedValue = document.querySelector('input[name=radiobutton]:checked').value;
  document.getElementById("content").innerHTML = selectedValue;
}</code>

コードの内訳は次のとおりです:

• document.querySelector('input[ name=radiobutton]:checked') は、現在選択されているラジオ ボタンを取得します。
• value は、選択されているラジオ ボタンの値を取得します。
• document.getElementById('content').innerHTML = selectedValue セットコンテンツ div の内容を、選択したラジオ ボタンの値に置き換えます。

「A」または「B」をクリックすると、この関数は div 要素内のテキストを更新します。

以上がJavaScript を使用して Div コンテンツを動的に更新する方法: ラジオ ボタンを使用したガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。