Question

问题是单选按钮没有出现。我对create node，create node text，create node value，createElement等概念感到困惑。

这是我的功能，

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>";
    }

提前感谢您的帮助，

Answer 1

它不会出现的原因是因为你将label的innerHTML替换为
questionPool [currentQuestion] .choices [i] +＆lt; br＆gt;。

当您将广播附加到标签时，标签的innerHTML变为＆＃34;＆lt; input＆gt; ...＆lt; / input＆gt;＆＃34; 但是你只需将其替换为

questionPool [currentQuestion] .choices [i] +＆＃34;＆lt; br＆gt;＆＃34;。

简单的移动了 label.innerHTML = ... 之前 label.appendChild可以解决您的情况。

这里是一个略微修改的答案，不使用innerHTML和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/

要在标签之前播放广播节目，我使用label.outerHTML将其作为标签注入内部HTML

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/

Answer 2

尝试以下代码。

<强>一个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);
}

Answer 3

以下是您问题的完整答案。 HTML部分

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

Javascript部分

    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();

Answer 4

您需要将radio button附加到question，请更改代码行

这

label.appendChild(radio);

到

question.appendChild(radio);

希望这有帮助！

单选按钮不是来自JS文件

4 个答案: