javascript - オブジェクト要素からラジオボタンリストを作成する

Question

オブジェクトの配列があり、オブジェクトの 1 つを取得して、オブジェクトの内容からラジオボタンのリストを作成したいと考えています。これまでの私のコードは次のとおりです。

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

ここに私の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>

問題は、ラジオボタンがanswersBox divに表示されないことです。

score 5 · Accepted Answer

基本的に、HTML値を設定するのではなく、作成した各要素をDOMの適切なノードに追加する必要があります（choiceSelectionはDOM要素であり、HTMLコードを表す文字列ではないため、機能しません）。

要するに-変化

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

に

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

labelラジオボタンの横にHTML要素を追加するように実装しました。

これが実際のjsfiddleの例です

またfor (choices in allQuestions[0])、forループに「choices」と呼ばれる内部変数を作成し、allQuestions [0]のプロパティを繰り返します。この場合、これらは「question」、「choices」、「correctAnswer」です。

あなたが意図したのは、「選択肢」の配列を反復処理することだと思います。これは、次のように実行できます。- for (choice in question.choices)次に、forループの各ステップで、選択肢に配列インデックスが入力されます。

次に、次のようにループ内から選択テキストにアクセスできます。 question.choices[choice]

score 2 · Accepted Answer

ラジオボタンをループ内のdocumentFragmentに追加します。forループの後、フラグメント (すべてのオプションを含む) をdocumentそれ自体に追加します。

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

例