Ändern Sie den Text neben einem Radio-Button mit Javascript?

Question

Ich bin sehr neu in Javascript und ich kann den Text neben dem Radio-Button nicht einstellen, was ich will, auch nach dem Versuch, alles zu finden, was ich online kann. Ich bin mir sicher, dass es etwas einfaches ist und ich würde es wirklich schätzen, wenn mir jemand helfen könnte.

Hier ist mein HTML-Element für meine Radiogruppe

<form class="description" action =""> 
    <input type="radio" id="answer0id" name="answers" value="answer0"> answer0<br> 
    <input type="radio" id="answer1id" name="answers" value="answer1"> answer1<br> 
    <input type="radio" id="answer2id" name="answers" value="answer2"> answer2<br> 
    <input type="radio" id="answer3id" name="answers" value="answer3"> answer3<br> 
</form> 

und das ist die Javascript Ich versuche zu laufen, nur um zu testen Änderung eines

document.getElementById('answer0id').value = 'testing123'; 

Ich weiß, es ist wahrscheinlich eine einfache Lösung , aber ich würde wirklich jemanden schätzen, der mir helfen könnte.

Answer 1

Der Text ist nur ein Schelm Textknoten, wie der Eingang selbstschließend ist und jeden inneren Text nicht enthalten, aber Sie können den Textknoten Ziel wie nextSibling nach der Eingabe mit etwas kommen

document.getElementById('answer0id').nextSibling.textContent = ' testing123';

<form class="description" action =""> 
 
    <input type="radio" id="answer0id" name="answers" value="answer0"> answer0<br> 
 
    <input type="radio" id="answer1id" name="answers" value="answer1"> answer1<br> 
 
    <input type="radio" id="answer2id" name="answers" value="answer2"> answer2<br> 
 
    <input type="radio" id="answer3id" name="answers" value="answer3"> answer3<br> 
 
</form>

Sie könnten auch die HTML ändern Sie den Text entweder in einer Spanne, Etikett oder ein anderes Element zu wickeln, das leichter wählbar ist.

document.querySelector('#answer0id ~ label').innerHTML = 'testing123';

<form class="description" action =""> 
 
    <input type="radio" id="answer0id" name="answers" value="answer0" /> 
 
    <label for="answer0id">answer0</label> 
 
    <br /> 
 
    <input type="radio" id="answer1id" name="answers" value="answer1" /> 
 
    <label for="answer1id">answer1</label> 
 
    <br /> 
 
    <input type="radio" id="answer2id" name="answers" value="answer2" /> 
 
    <label for="answer2id">answer2</label> 
 
    <br /> 
 
    <input type="radio" id="answer3id" name="answers" value="answer3" /> 
 
    <label for="answer3id">answer3</label> 
 
</form>

Answer 2

Ich glaube, dass label ist das, was Sie suchen.

Hinweis: Eingabe nicht innerHTML/textContent Attribute hat, da es sich um ein nicht-End-Tag ist. Deshalb hat der Erfinder von HTML Labels erfunden. Außerdem können Sie den Radiobutton durch Klicken auf den entsprechenden Text überprüfen.

let elem = document.querySelector('label[for="answer0id"]'); 
 

 
elem.textContent = 'testing123';

<form class="description" action=""> 
 
    <input type="radio" id="answer0id" name="answers" value="answer0"> 
 
    <label for='answer0id'>answer0</label><br /> 
 
    <input type="radio" id="answer1id" name="answers" value="answer1"> 
 
    <label for='answer1id'>answer1</label><br /> 
 
    <input type="radio" id="answer2id" name="answers" value="answer2"> 
 
    <label for='answer2id'>answer2</label><br /> 
 
    <input type="radio" id="answer3id" name="answers" value="answer3"> 
 
    <label for='answer3id'>answer3</label> 
 
</form>

Answer 3

document.getElementById('answer0id').Wert= 'testing123'; bezieht sich auf <input type="radio" id="answer0id" name="answers"value = "answer0"> answer0<br>. Daher ändert es den Text nicht. In Ihrem Fall können Sie den Text über .nextSibling.textContent auswählen (siehe unten). Eine Alternative wäre, den Text in ein zusätzliches Element zu verpacken, beispielsweise <span id="answer0-label">answer0</span>, und dieses direkt auszuwählen.

document.getElementById('answer0id').nextSibling.textContent = ' testing123';

<form class="description" action =""> 
 
    <input type="radio" id="answer0id" name="answers" value="answer0"> answer0<br> 
 
    <input type="radio" id="answer1id" name="answers" value="answer1"> answer1<br> 
 
    <input type="radio" id="answer2id" name="answers" value="answer2"> answer2<br> 
 
    <input type="radio" id="answer3id" name="answers" value="answer3"> answer3<br> 
 
</form>