Create radio button list from object elements

javascript

Solution

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

Problem

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.

Original source