如何使用 JavaScript 根據使用者互動動態更改 div 的內容？-js教程-PHP中文網

如何使用 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 提供了多種方法來操作網頁上的元素，包括能夠更改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中文網其他相關文章！