How to store a data with javascript using objects

Question

I wrote this code:

$(".awesome").click(function () {
        var toStore = $("input[name=name]").val();
        if (/^[A-Za-z]+ [A-Za-z]+$/.test(toStore)) {
            $("#contain").children().fadeOut(1000);
            $("#contain").delay(1000).queue(function () {
                $("#contain").append("<h1>Welcome to My Quiz : " + toStore + "</br>" +
                    "Youll Get 10 Questions To Answer </br> " +
                    "Here Is the First One:Who is Prime Minister of the United Kingdom? </h1>");

                var allQuestions = [
                    {question: "Who is Prime Minister of the United Kingdom?",
                        choices: ["David Cameron",
                            "Gordon Brown",
                            "Winston Churchill",
                            "Tony Blair"],
                        correctAnswer: 0}
                ];
                $("#contain").append("<form><input type='radio' name='ans1' value='David Cameron'>David Cameron</br>" +
                    " <input type='radio' name='ans1' value='Gordon Brown'>Gordon Brown</br>" +
                    "<input type='radio' name = 'ans1' value = 'Winston Churchill' > Winston Churchill </br>" +
                    "<input type='radio' name='ans1' value='Tony Blair'>Tony Blair</br>" +
                    "<input type='submit' value='Submit' name='submit'></form>");
                $("input[name=submit]").click(function () {
                    var correctAnswer;
                    if ($("input[name=ans1]").val()) {
                        var x = "choices";
                        allQuestions[x] = "David Cameron";
                        for (var x in allQuestions) {
                            return correctAmswer = false;

                            if (allQuestions[x] === "David Cameron") {

                                return correctAnswer = true;
                            } else {
                                return correctAnswer = false;
                            }

                        }
                    }
                });
            });
        } else {
            alert("You Must Put a Valid Name");
        }
    });
});

Now as you can see I have an Object called "allQuestions". Now I have 3 properties: "question" "choices" and "correct answer". Afterwards I have a submit button that if you click it it checks the value of the input name="ans1",then I loop through all of the choices in Object "allQuestions"; if then answer is "David Cameron" I want it to store the correctAnswer to be 1 instead of 0; else I don't want to store the correctAnswer and it remains 0 because I have more questions afterwards. Any suggestions how to do so?

Answer 1

• The first problem is that direct event handling does not work with dynamically added elements if you register your event handler before the elements are added. In your case, I think it works because you register you event handler after the elements are added. But you should change it to:

  $("#contain").on("click","input[name=submit]", function(){ your function})

• The second problem is that the way you access your allQuestions is not correct because it's an array. It should be: allQuestions[0][x];

• The third problem like @Benjamin Gruenbaum mentioned.