Comment mettre à jour dynamiquement le contenu Div avec JavaScript : un guide utilisant les boutons radio

Comment modifier le contenu Div avec JavaScript

Modifier le contenu d'un élément div à l'aide de JavaScript est une tâche courante dans le développement Web. Cet article vous guidera à travers les étapes à suivre, même si le div n'a pas d'attribut "value".

Imaginez que vous ayez le code HTML suivant :

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

Vous souhaitez pouvoir modifiez le contenu de l'élément div en sélectionnant les boutons radio "A" ou "B".

Comme il n'y a pas d'attribut "value" pour le div, vous pouvez utiliser la propriété innerHTML de l'élément pour définir son contenu.

La fonction JavaScript suivante accomplit cela :

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

Voici une répartition du code :

• document.querySelector('input[ name=radiobutton]:checked') obtient le bouton radio actuellement sélectionné.
• value obtient la valeur du bouton radio sélectionné.
• document.getElementById('content').innerHTML = selectedValue sets le contenu du contenu div à la valeur du bouton radio sélectionné.

En cliquant sur "A" ou "B", cette fonction mettra à jour le texte à l'intérieur de l'élément div.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!