So aktualisieren Sie Div-Inhalte dynamisch mit JavaScript: Eine Anleitung zur Verwendung von Optionsfeldern

So ändern Sie Div-Inhalte mit JavaScript

Das Ändern des Inhalts eines Div-Elements mithilfe von JavaScript ist eine häufige Aufgabe in der Webentwicklung. Dieser Artikel führt Sie durch die erforderlichen Schritte, auch wenn dem Div ein „Wert“-Attribut fehlt.

Stellen Sie sich vor, Sie haben den folgenden HTML-Code:

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

Sie möchten dazu in der Lage sein Ändern Sie den Inhalt des div-Elements, indem Sie entweder die Optionsfelder „A“ oder „B“ auswählen.

Da es für das div kein „value“-Attribut gibt, können Sie die innerHTML-Eigenschaft des Elements verwenden um seinen Inhalt festzulegen.

Die folgende JavaScript-Funktion erreicht dies:

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

Hier ist eine Aufschlüsselung des Codes:

• document.querySelector('input[ name=radiobutton]:checked') ruft das aktuell ausgewählte Optionsfeld ab.
• value ruft den Wert des ausgewählten Optionsfelds ab.
• document.getElementById('content').innerHTML = selectedValue setzt Der Inhalt des Inhalts-Div wird auf den Wert des ausgewählten Optionsfelds gesetzt.

Durch Klicken auf „A“ oder „B“ aktualisiert diese Funktion den Text im Div-Element.

Das obige ist der detaillierte Inhalt vonSo aktualisieren Sie Div-Inhalte dynamisch mit JavaScript: Eine Anleitung zur Verwendung von Optionsfeldern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!