Cara Mengemas kini Kandungan Div secara Dinamik dengan JavaScript: Panduan Menggunakan Butang Radio

Cara Menukar Kandungan Div dengan JavaScript

Mengubah suai kandungan elemen div menggunakan JavaScript ialah tugas biasa dalam pembangunan web. Artikel ini akan membimbing anda melalui langkah-langkah yang terlibat, walaupun div tidak mempunyai atribut "nilai".

Bayangkan anda mempunyai kod HTML berikut:

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

Anda mahu dapat tukar kandungan elemen div dengan memilih sama ada butang radio "A" atau "B".

Memandangkan tiada atribut "nilai" untuk div, anda boleh menggunakan sifat innerHTML elemen untuk menetapkan kandungannya.

Fungsi JavaScript berikut melaksanakannya:

<code class="js">function changeDivContent() {
  let selectedValue = document.querySelector('input[name=radiobutton]:checked').value;
  document.getElementById("content").innerHTML = selectedValue;
}</code>

Berikut ialah pecahan kod:

• document.querySelector('input[ name=radiobutton]:checked') mendapat butang radio yang dipilih pada masa ini.
• nilai mendapat nilai butang radio yang dipilih.
• document.getElementById('content').innerHTML = selectedValue set kandungan div kandungan kepada nilai butang radio yang dipilih.

Dengan mengklik sama ada "A" atau "B", fungsi ini akan mengemas kini teks di dalam elemen div.

Atas ialah kandungan terperinci Cara Mengemas kini Kandungan Div secara Dinamik dengan JavaScript: Panduan Menggunakan Butang Radio. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!