如何使用 JavaScript 根據使用者互動動態更改 div 的內容？
- Susan Sarandon原創
- 2024-10-29 10:54:29705瀏覽
如何使用JavaScript 更改Div 的內容
JavaScript 提供了多種方法來操作網頁上的元素，包括能夠更改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>
在此程式碼中，我們有兩個單選按鈕（A 和 B）和一個 div id 為「內容」。目標是在選擇其中一個單選按鈕時變更「content」div 的內容。
要達成此目的，我們可以使用內容元素的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 的內容，從而創建更具互動性的網頁。
以上是如何使用 JavaScript 根據使用者互動動態更改 div 的內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn