CODEWITHSUNDEEP
javascript
Yumiko
Yumiko

Reputation: 468

radio button doesn't come up from JS file

The issue is the radio button didn't come up. And I am confused with the concept of create node, create node text, create node value, createElement, etc. those kind of concepts.

Here is my code, http://jsfiddle.net/vadjn2an/

Here is my function, 

function displayQuestion() {
    var question = document.getElementById("question");
    question.textContent = questionPool[currentQuestion].question;
    var numberOfChoices = questionPool[currentQuestion].choices.length;
    for(var i=0; i < numberOfChoices; i++) {
        var label = document.createElement('label');
        var radio = document.createElement('input');
        radio.setAttribute('type', 'radio');
        radio.setAttribute('name', 'choice');
        radio.setAttribute('value', 'questionPool[currentQuestion].choices[i]');
        label.appendChild(radio); 
        question.appendChild(label);
        label.innerHTML = questionPool[currentQuestion].choices[i] + "<br>";
    }

Thanks for your help in advance,

Upvotes: 1

Views: 104

Answers (4)

SansWord
SansWord

Reputation: 91

The reason it won't show up is because you replace label's innerHTML into
questionPool[currentQuestion].choices[i] + <br>.

when you append radio into label,label's innerHTML become "<input>...</input>" but then you just replace it into

questionPool[currentQuestion].choices[i] + "<br>".

simple move the label.innerHTML= ... up before label.appendChild can solve your situation.

here's a slightly modify answer without using innerHTML and outerHTML.

    function displayQuestion() {
    var question = document.getElementById("question"),
        currentQuestion = 0,
        numberOfChoices = questionPool[currentQuestion].choices.length;
    question.textContent = questionPool[currentQuestion].question;
    question.appendChild(document.createElement('br'));
    for(var i=0; i < numberOfChoices; i++) {
        var label = document.createElement('label'),
            radio = document.createElement('input'),
            textNode= document.createTextNode(questionPool[currentQuestion].choices[    i]),
            lineBreakNode = document.createElement("br");
        radio.setAttribute('type', 'radio');
        radio.setAttribute('name', 'choice');
        radio.setAttribute('value',     'questionPool[currentQuestion].choices[i]');
        label.appendChild(radio);
        label.appendChild(textNode);
        label.appendChild(lineBreakNode);        
        question.appendChild(label);
    }
}

http://jsfiddle.net/vadjn2an/9/

to have radio show before label, I use label.outerHTML to inject it as label's innerHTML

function displayQuestion() {
    var question = document.getElementById("question");
    var currentQuestion = 0;
    var numberOfChoices = questionPool[currentQuestion].choices.length;
    question.textContent = questionPool[currentQuestion].question;
    question.appendChild(document.createElement('br'));
    for(var i=0; i < numberOfChoices; i++) {
        var label = document.createElement('label');
        var radio = document.createElement('input');
        radio.setAttribute('type', 'radio');
        radio.setAttribute('name', 'choice');
        radio.setAttribute('value',     'questionPool[currentQuestion].choices[i]');
        label.innerHTML = radio.outerHTML +  questionPool[currentQuestion].choices[i] + "<br/>";
        question.appendChild(label);
    }
}

http://jsfiddle.net/vadjn2an/8/

Upvotes: 1

julien carax
julien carax

Reputation: 335

Here is the complete answer to your question. The HTML part

  <form>
    <label id="question">Question:</label><br />
    <div id="answersBox">
    </div>
    <input type="button" value="save" />
</form>

The Javascript part

    var questionPool = [
    {
    question: " Which is the biggest city in China?",
    choices: ["Beijing", "Shanghai", "Guangzhou"],
    correctAnswer: "Beijing",
    }
];

var currentQuestion = questionPool[0].question;

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

choiceList();
function choiceList() {
    var question=questionPool[0];
     for (choice in question.choices) {        

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



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

    choiceLabel.innerHTML=question.choices[choice];
    choiceLabel.setAttribute('for', question.choices[choice]);

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

}
choiceList();

Upvotes: 1

easywaru
easywaru

Reputation: 1153

Try below code.

createTextNode

var questionPool = [
    {
    question: " Which is the biggest city in China?",
    choices: ["Beijing", "Shanghai", "Guangzhou"],
    correctAnswer: 1,
    }
];

var question = document.getElementById("question");
var questionPool = questionPool[0];
question.textContent = questionPool.question;

for(var i=0;i<questionPool.choices.length;i++){
    var label = document.createElement('label');

    var radio = document.createElement('input');
    radio.setAttribute('type', 'radio');
    radio.setAttribute('name', 'choice');
    radio.setAttribute('value', questionPool.choices[i]);
    label.appendChild(radio); 

    var txt = document.createTextNode(questionPool.choices[i]);
    label.appendChild(txt);

    question.appendChild(label);
}

Upvotes: 1

Ashish Panchal
Ashish Panchal

Reputation: 504

You need to append the radio button to question, please change the code line

from

label.appendChild(radio);

to 

question.appendChild(radio);

Hope this helps!

Upvotes: 0

Related Questions