HTML Radio Button Label - Fill with Javascript ID?

Question

I have this HTML -

 <div class="qa">
<div class="questions"></div>
<div class="answers">
  <div class="answer">
    <input type="radio" name="answer" value="Correct" id="Correct" /><label for="Correct"> Answer 1 </label>
  </div>
  <div class="answer">
    <input type="radio" name="answer" value="Incorrect" id="Incorrect" /><label for="Incorrect"> Answer 2 </label>
  </div>
</div>

And my JavaScript look something like this -

var questions = [ {
"q": "When was Project Launched?",
"a": {"Correct": "That's Right!","Incorrect": "Nope, Project was launched in 2016"  },
"Option1": "2016",
"Option2": "2017"  
},

What I would like is the answers to pull dynamically to the radio button label in the HTML. So I really need to be able to put the "Option1" and "Option2" IDs into the <label for="Correct"> space instead of just the static "Answer1" "Answer2" text.

Is it possible?

Thanks,

I really can't understant how can we know which is the right answer, is Option1 always Answer1 and Option2 always Answer2? — LellisMoon, Jan 19 '17 at 10:03
Answer 1 and Answer 2 are just placeholders for where I want the Option1 and Option2 answers to actually go, if that makes sense? — Alistair Montgomery, Jan 20 '17 at 10:48

score 3 · Answer 1 · edited May 23 '17 at 12:08

3

try $('label[for=Correct]').html('New Label'); or without Jquery

var input = document.getElementById('Correct');
var label = input.getElementsByTagName('label')[0];
label.innerHTML = 'New Text';

From this answer

edited May 23 '17 at 12:08

Community

1
1

answered Jan 19 '17 at 10:09

Timble

499
4
15

score 0 · Accepted Answer · answered Jan 19 '17 at 10:15

Does this help you?

var questions = [ {
    "q": "When was Project Launched?",
    "a": {"Correct": "That's Right!","Incorrect": "Nope, Project was launched in 2016"  },
    "Option1": "2016",
    "Option2": "2017"  
}];



var divElement1 = document.getElementsByClassName("answer")[0];
divElement1.childNodes[3].innerText = questions[0].Option1;

var divElement2 = document.getElementsByClassName("answer")[1];
divElement2.childNodes[3].innerText = questions[0].Option2;

<div class="qa">
    <div class="questions"></div>
    <div class="answers">
        <div class="answer">
   <input type="radio" name="answer" value="Correct" id="Correct" />
   <label for="Correct"> Answer 1 </label>
  </div>
  <div class="answer">
   <input type="radio" name="answer" value="Incorrect" id="Incorrect" />
   <label for="Incorrect"> Answer 2 </label>
  </div>
 </div>
</div>

Yeah, that actually seems to work! Thank you! Can you maybe explain why the "Answer 2" and "Answer 1" text is still in the HTML? It doesn't seem to do anything now? — Alistair Montgomery, Jan 20 '17 at 10:52
Also, if I want to add more questions, say 5 in total, with different answers how would I do that with this set up? — Alistair Montgomery, Jan 20 '17 at 10:55

HTML Radio Button Label - Fill with Javascript ID?

2 Answers2