Rumah >hujung hadapan web >tutorial js >Bagaimanakah saya boleh menukar kandungan div secara dinamik menggunakan JavaScript berdasarkan interaksi pengguna?

Bagaimanakah saya boleh menukar kandungan div secara dinamik menggunakan JavaScript berdasarkan interaksi pengguna?

Susan Sarandonasal: 2024-10-29 10:54:29710semak imbas

How do I dynamically change the content of a div using JavaScript based on user interaction?

Cara Menukar Kandungan Div dengan JavaScript

JavaScript menyediakan pelbagai cara untuk memanipulasi elemen pada halaman web, termasuk keupayaan untuk menukar kandungan div. Mari kita tunjukkan cara ini boleh dicapai menggunakan kod JavaScript mudah.

Pertimbangkan kod HTML berikut:

<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>

Dalam kod ini, kami mempunyai dua butang radio (A dan B) dan satu div dengan id "kandungan." Matlamatnya adalah untuk menukar kandungan div "kandungan" apabila salah satu butang radio dipilih.

Untuk mencapai ini, kita boleh menggunakan sifat HTML dalaman bagi elemen kandungan. Begini caranya:

<code class="javascript">document.getElementById("content").innerHTML = "whatever";</code>

Apabila anda memilih butang radio "A" atau "B", fungsi changeDivContent() dipanggil. Dalam fungsi ini, anda boleh menetapkan sifat HTML dalaman bagi elemen kandungan kepada teks yang dikehendaki. Contohnya:

<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>

Kod ini menyemak butang radio mana yang dipilih dan menukar kandungan div "kandungan" dengan sewajarnya. Anda boleh menyesuaikan nilai innerHTML dengan teks yang anda mahu paparkan. Teknik ini membolehkan anda menukar kandungan div secara dinamik berdasarkan interaksi pengguna, mencipta lebih banyak halaman web interaktif.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menukar kandungan div secara dinamik menggunakan JavaScript berdasarkan interaksi pengguna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html for select using Property function this innerHTML display

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Mengekori Koma dalam Tatasusunan dan Objek: Adakah Ia Standard dalam JavaScript?Artikel seterusnya：Mengekori Koma dalam Tatasusunan dan Objek: Adakah Ia Standard dalam JavaScript?

Artikel berkaitan

Lihat lagi