Change the text next to a radio button using javascript?

Question

I am very new to javascript and I can't set the text next to the Radio button to what I want, even after trying to find everything I can online. I am sure it something simple and I would really apprecitae it if someone could help me.

Here is my HTML Element for my radio group

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

And this is the Javascript I am trying to run to test just changing one

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

I know it is probably an easy fix, but I would really appreciate anyone who could help me.

So what happens? Nothing? Are you sure the javascript even executes? Where are you putting it? — Ann L.
– Ann L., Commented Jul 22, 2017 at 22:39
Actually, the text - if by that you mean the string right before the <br> -- isn't the value of the input tag. It's a separate text node. — Ann L.
– Ann L., Commented Jul 22, 2017 at 22:43
@adeneo Yeah, just realized that. Will delete my suggestion. — Ann L.
– Ann L., Commented Jul 22, 2017 at 22:44

adeneo · Accepted Answer · 2017-07-22 23:00:13Z

6

The text is just a rogue text node, as the input is self-closing and can't contain any inner text, but you can target the text node coming after the input with something like nextSibling

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>

You could also modify the HTML to wrap the text in either a span, label or some other element that is more easily selectable.

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>

edited Jul 22, 2017 at 23:00

answered Jul 22, 2017 at 22:41

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jake Vossen Over a year ago

Thank you! Weirdly now, all the text is bolded in the radio group. Any idea why that would be?

adeneo Over a year ago

Not really, some CSS must be affecting it, check your stylesheets ?

Jake Vossen Over a year ago

Thank you. Any idea what it would look like? Thanks so much

adeneo Over a year ago

If the text is bold, you probably have a font-weight set somewhere

kind user · Accepted Answer · 2017-07-22 22:51:30Z

I believe that label is what you are looking for.

Note: Input doesn't have innerHTML/textContent attributes since it's a non-closing tag. That's why the inventor of HTML came up with labels. What's more - you are even able to check the radio button by clicking the corresponding text.

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>

SVSchmidt · Accepted Answer · 2017-07-22 22:43:27Z

document.getElementById('answer0id').value= 'testing123'; refers to <input type="radio" id="answer0id" name="answers"value="answer0"> answer0<br>. Therefore, it does not change the text.

In your case, you can select the text via .nextSibling.textContent (see below). An alternative would be wrapping the text in an extra element, say <span id="answer0-label">answer0</span> and select that one directly.

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>

Collectives™ on Stack Overflow

Change the text next to a radio button using javascript?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related