Bagaimanakah saya boleh menukar kandungan div secara dinamik menggunakan JavaScript berdasarkan interaksi pengguna?-tutorial js-php.cn

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

Susan Sarandon

Lepaskan： 2024-10-29 10:54:29

asal

653 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!