How can I add text to radio button with Javascript?

Question

I'm creating a quiz and I have radio buttons that need to be used to select answers.

I'm using an array which contains objects that have 3 properties.

a property asks the question.
a property holds an array of answers.
a property that has the index value of the correct answer from the array of answers.

Basically it looks like this:

var questions = [{question1: "What color is the sky?", answers:["blue", "red", "green", "orange"], correctAnswer: 0}];

correctAnswer: 0 is the index value of blue.

I'm at the point where I need to start putting the values of these objects into the markup.

For example, I have 4 radio buttons in my html.

<form id="buttons">
            <input type="radio" name="answer" value="0"><br>
            <input type="radio" name="answer" value="1"><br>
            <input type="radio" name="answer" value="2"><br>
            <input type="radio" name="answer" value="3"><br>
        </form>

I need javascript to input the answers to my question next to my radio buttons and I want to test if the person selected the correct answer by checking if the value of the radio button is the same as the index value inside the object.

so it would look like this with the above array example.

<form id="buttons">
            <input type="radio" name="answer" value="0">blue<br>
            <input type="radio" name="answer" value="1">red<br>
            <input type="radio" name="answer" value="2">green<br>
            <input type="radio" name="answer" value="3">orange<br>
        </form>

the correct answer in the example would be the value = "0";

I hope this is not too confusing. I am working on the week 4 quiz project from http://javascriptissexy.com/how-to-learn-javascript-properly/

If you want to learn JavaScript with free internet tutorials, would be better if you look at Tutorials | MDN — Givi
– Givi, Commented Feb 8, 2014 at 20:32
If you're interested in, how this quiz should be done with DOM Standards look at jsFiddle — Givi
– Givi, Commented Feb 8, 2014 at 22:39
Thank you for this, I know you aren't supposed to leave messages like this on here but this really opened my eyes. — Vodka_Tonic
– Vodka_Tonic, Commented Feb 11, 2014 at 4:57

Vinci · Accepted Answer · 2021-03-22 00:27:21Z

1

Simple code that adds new node with the label and it work's fine

var x = document.createElement("INPUT");
        x.setAttribute("type", "radio");
        x.setAttribute("name", "sort");
        x.setAttribute("value", "town");
        x.setAttribute("id", "town");
        container_element.appendChild(x);
        var label = document.createElement('label');
        label.setAttribute('for', 'town');
        label.innerHTML = "town";
        container_element.appendChild(label);

answered Mar 22, 2021 at 0:27

Vinci

1,2961 gold badge14 silver badges20 bronze badges

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

Comments

Keith · Accepted Answer · 2014-02-08 21:10:23Z

Your question has a few ambiguities

If there is going to be more than one question, then what should the input names be? For instance name1, name2, etc.?
What do you want to do with the correct answer? For instance, you could store it as a data attribute on the input like this: <input type="radio" name="answer" data-correct="true">Blue<br>

Either way, I assume since you are studying Javascript, and not jQuery (which would make this task 10 times easier) you can try this:

(Edited to use Array.forEach() instead of for(var in...)

<form id="buttons">
</form> 

<script type="text/javascript">

var questions = [
  { question1: "What color is the sky?", 
    answers:["blue", "red", "green", "orange"], 
    correctAnswer: 0
  }
];

var questionHtml = '';
questions.forEach(function(question) {
  questionHtml = '<p>'+  question.question1 + '</p>';
  question.answers.forEach(function(answer, i) {
    questionHtml += '<input type="radio" name="answer" '
    questionHtml += 'value="' + i + '">'
    questionHtml += answer + '<br>'
  })
})
document.getElementById('buttons').innerHTML = questionHtml;

</script>

You can play with it here: JSFiddle

Jeff F. · Accepted Answer · 2014-02-08 20:39:31Z

0

Add labels after your inputs and fill the answers in those.

<form id="buttons">
    <input type="radio" name="answer" value="0"><label></label><br>
    <input type="radio" name="answer" value="1"><label></label><br>
    <input type="radio" name="answer" value="2"><label></label><br>
    <input type="radio" name="answer" value="3"><label></label><br>
</form>

and

var labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i += 1) {
    labels[i].innerHTML = yourValues[i];
}

From there you'll want to add smarter logic for putting the right value in the right label, but that's the basic idea.

answered Feb 8, 2014 at 20:39

Jeff F.

1,0655 silver badges12 bronze badges

Collectives™ on Stack Overflow

How can I add text to radio button with Javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related