Create radio button list from object elements

Question

I have an array of objects and I would like to take one of the objects and create a list of radio buttons from the objects contents. Here is my code so far.

var allQuestions = [{question: "This is question number one", choices: ["one", "two", "three", "four"], correctAnswer:"two"},{question: "This is question number two", choices: ["dog", "cat", "bear", "lion"], correctAnswer:"bear"}];

var currentQuestion = allQuestions[1].question;

document.getElementById('question').innerHTML = currentQuestion;

function choiceList() { 

    for (choices in allQuestions[0]) {

    var choiceSelection = document.createElement('input');

    choiceSelection.setAttribute('type', 'radio');
    choiceSelection.setAttribute('name', 'choice');

    document.getElementById('answersBox').innerHTML = choiceSelection;
    }
}

Here is my HTML:

<body>
    <form>
        <label id="question">Question:</label><br />
        <div id="answersBox">
        </div>
        <input type="button" value="save" />
    </form>
  <script src="scripts.js"></script>
</body>

The problem is, the radio buttons are not showing up in the answersBox div.

OpherV · Accepted Answer · 2013-03-22 19:08:31Z

Essentially you need to append each element you create to the proper node in the DOM, rather than set its HTML value (which wouldn't work, since choiceSelection is a DOM element and not a string representing its HTML code)

In short- change

document.getElementById('answersBox').innerHTML = choiceSelection;

to

document.getElementById('answersBox').appendChild(choiceSelection);

I've implemented adding the label HTML element next to the radio button.

Here's a working jsfiddle example

I would also like for you to notice that for (choices in allQuestions[0]) creates an internal variable in the for loop called "choices" that iterates over the properties of allQuestions[0], in this case they are "question", "choices" and "correctAnswer".

I think what you intended to do is to iterate over the array of "choices", which can be done like so: for (choice in question.choices) - then with each step of the for loop, choice is populated with the array index.

You can then access the choice text from inside the loop like so: question.choices[choice]

Chase · Accepted Answer · 2013-03-22 19:33:26Z

2

Append your radio buttons to a documentFragment within your for loop. After the loop append the fragment (containing all of your options) to the document itself.

var frag = document.createDocumentFragment();

for (choices in allQuestions[0]) {

    var choiceSelection = document.createElement('input');
    choiceSelection.setAttribute('type', 'radio');
    choiceSelection.setAttribute('name', 'choice');

    frag.appendChild(choiceSelection);
}

document.getElementById('answersBox').appendChild(frag);

EXAMPLE

There's a good article here about using document fragments.
appendChild
documentFragment

EDIT:

Updated with labels

edited Mar 22, 2013 at 19:33

answered Mar 22, 2013 at 18:49

Chase

29.6k1 gold badge52 silver badges49 bronze badges

4 Comments

user2137425 Over a year ago

Thanks Chase. Is there a way to take the "choice" value e.g. "one", "two", "three" and place it after the radio button?

Chase Over a year ago

What do you mean by after the radio button?

user2137425 Over a year ago

Well, the first radio button would have "one" after it, the second would have "two" etc. etc. In HTML it would like like <input type="radio" name="choice">one

Chase Over a year ago

@user2137425 - That's what I thought you meant, but I wasn't quite sure. I've updated the response with labels, but it seems you've decided on another answer. This is fine, but I do suggest you look into writing all your changes into a document fragment before appending them directly into the document.

letiagoalves · Accepted Answer · 2013-03-22 18:45:17Z

0

You need to use .appendChild function because choiceSelection is a DOM Element in your code and not a HTML string.

document.getElementById('answersBox').appendChild(choiceSelection);

Also I don't see you calling choiceList()

DEMO

answered Mar 22, 2013 at 18:45

letiagoalves

11.3k4 gold badges42 silver badges68 bronze badges

4 Comments

OpherV Over a year ago

@user2137425 I've updated my answer above to reflect how to add labels. Take a look

letiagoalves Over a year ago

@user2137425 Next time say also that you want to display text for each radio button.

OpherV Over a year ago

@letiagoalves I think this comment was intended for the OP?

letiagoalves Over a year ago

@OpherV yes it was. Sorry. Updated.

Collectives™ on Stack Overflow

Create radio button list from object elements

3 Answers 3

Comments

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related