如何使用 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中文網其他相關文章！