Question

好的，所以我一直在阅读JS并决定创建一个测验应用程序来练习我的新技能。所以基本上它是一个花哨的应用程序，一次要求State Capitals一个，并立即给出正确的答案这是HTML：

<header>
    <h1>The All-Star State Capitals Quiz.</h1>
    <h3>How well do you know your state capitals?</h3>
</header>
<section id = "main">
<div id = "playArea">
    <div id = "questionArea">
    </div>
    <div id = "answerArea">
        <input  name = "choices" id = "answerA" type = "radio">
        <br>
        <input name = "choices" id = "answerB" type = "radio">
        <br>
        <input name = "choices" id = "answerC" type = "radio">
        <br>
        <input name = "choices" id = "answerD" type = "radio">
    </div>
    <!--button-->
    <div>
        <input type = "button" id = "nextQuestion" value = "Next Question">
    </div>
</div>
    <div id = "quizState">
        <p id = "result"></p>
        <p id = "correctAnswer"></p>
        <p id = "scoreSoFar"></p>
    </div>
</section>

所以我的想法是做一个单独的JS MVC ish事情来动态更新questionArea和answerArea。问题区域很容易用“.innerHTML”但是answerArea让我头疼，因为我无法让它更新选择使用appendChild（我在Mac上使用chrome）。这是js：

var view = 
    {
        displayQuestion:function(quiztion)
        {
            var questionArea = document.getElementById("questionArea");
            questionArea.innerHTML = quiztion;
        },
        displayAnswers: function(answers)
        {

            var answerArea = document.getElementById("answerArea");
            var inputs = document.getElementsByName("choices");
            for(var i = 0;i<inputs.length;i++)
            {
                var answer = answers[i];
                var lblTxt = document.createTextNode(answer);
                var lbl = document.createElement("label").appendChild(lblTxt);
                inputs[i].appendChild(lbl);
            }
        }

    }

view.displayQuestion("1.What is the capital of Massachusetts?");
view.displayAnswers(["A.Boston","B.New Haven","C.Albany","D.Hartford"]);

所以基本上我的问题是我无法将选择单选按钮更新到displayAnswer测试示例。有趣的是我可以看到DOM中的选项，没有我想要的“标签”标签。有什么帮助？

Answer 1

您可以使用javascript代码修复几个问题来解决问题。正如评论中所建议的那样，您可以使用insertBefore（），但请查看方法的定义：

insertBefore（）方法将一个节点作为子节点插入 您指定的现有子项。

因此，在您的特定情况下，您需要将新子项 - 标签 - 作为答案区域的节点子项插入并且在输入[i]下一个兄弟元素之前（下一个兄弟，因为否则无线电将在标签之后）而不是之前）。

var view = 
{
    displayQuestion:function(quiztion)
    {
        var questionArea = document.getElementById("questionArea");
        questionArea.innerHTML = quiztion;
    },
    displayAnswers: function(answers)
    {

        var answerArea = document.getElementById("answerArea");
        var inputs = document.getElementsByName("choices");
        for(var i = 0;i<inputs.length;i++)
        {
            var answer = answers[i];
            var lblTxt = document.createTextNode(answer);
            var lbl = document.createElement("label").appendChild(lblTxt);
            answerArea.insertBefore(lbl, inputs[i].nextSibling);
        }
    }

}

view.displayQuestion("1.What is the capital of Massachusetts?");
view.displayAnswers(["A.Boston","B.New Haven","C.Albany","D.Hartford"]);

我在这里为您创建了一个小提琴： http://jsfiddle.net/5pSf5/ ，因此您可以看到代码正常运行。

如果您想要更进一步，可以使用一些云后端服务，如Teech.io，Parse或Orchestrate，将测验存储在云端，并通过API获取，而无需设置数据库。此外，Teech.io还为此类应用提供了一些特定功能，例如自动更正测验。

免责声明：我是Teech.io的创始人：）

appendChild不工作？

1 个答案: