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