CODEWITHSUNDEEP
javascriptdomappendchild
Boa Constrictor
Boa Constrictor

Reputation: 1

appendChild not working?

Ok,so I've been reading up on JS and decided to create a quiz app to practice my new skills.So basically it's going to a fancy app that asks State Capitals one at a time,and gives the correct answer immediately.This is the 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>

So my idea was to do a separate JS MVC ish thing to update both the questionArea and answerArea dynamically.the questionarea is easy with ".innerHTML" but the answerArea is giving me a headache because I cannot get it to update the choices using appendChild(i'm using chrome on Mac).This is the 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"]);

so basically my problem is that I cannot update the choice radio buttons to the displayAnswer test example.Funny thing is I can see the choices in the DOM,without the "label" tag as I wanted.Any help?

Upvotes: 0

Views: 4598

Answers (1)

lorenzobr
lorenzobr

Reputation: 21

You can solve the problem with couple of fixes on your javascript code. As suggested in the comments, you can use insertBefore() but look at the definition of the method:

The insertBefore() method inserts a node as a child, right before an existing child, which you specify.

So in your particular case, you need to insert the new child - the label - as node child of the answer area and right before the input[i] next sibling element (next sibling because otherwise the radio will be after the label instead of before it).

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

I created a fiddle for you here: http://jsfiddle.net/5pSf5/, so you can see the code working.

If you want go further, you could use some cloud backend service like Teech.io, Parse or Orchestrate, to store the quizzes in the cloud and get them via API without the need to set up a database. Plus, Teech.io has some specific features for this kind of apps, like autocorrection of quizzes.

Disclaimer: I'm the founder of Teech.io :)

Upvotes: 2

Related Questions