带有单选按钮的JavaScript表单

时间:2012-11-04 18:26:06

标签: javascript html forms radio-button

我正在尝试在javascript中进行测验,我使用单选按钮检查提供给用户的答案。它检查第一个条目ok,但是当它移动到第二个问题时,它会抛出一个未定义的类型错误cannot read property of undefined。在这一行,我已经尝试使用getElementById并使用document.form,但无法找出错误的原因。代码是用于第一个问题的复制和粘贴,工作正常!请帮忙!

var questionsChosen = new Array();
for (var i = 1;i<16 ;i++ )
{
    questionsChosen[i]= false;
}
function randomQuestion()
{
    var myQuestions = new Array();
    myQuestions[1] = "<tr><td><h4>Which one of these authors wrote and illustrated 'Calvin and Hobbes'?</h4></td></tr><tr><td><input type='radio' name='question1' value='Charles Schultz'>Charles Schultz<br><input type='radio' name='question1' id='correct' value='Bill Watterson'>Bill Watterson<br><input type='radio' name='question1' value='Jim Davis'>Jim Davis<br><input type='radio' name='question1' value='Tommy Peters'>Tommy Peters<br><hr/></td></tr>";

    myQuestions[2] = "<tr><td><h4>In the Calvin and Hobbes Comic, Who was Calvin's annoying neighbour?</h4></td></tr><tr><td><input type='radio' name='question2' id='correct' value='Susie Derkins'/>Susie Derkins<br><input type='radio' name='question2' value='Samantha Jones'/>Samantha Jones<br><input type='radio' name='question2' value='Sally Parker'/>Sally Parker<br><input type='radio' name='question2' value='Sarah Marsh'/>Sarah Marsh<br><hr/></td></tr>";

    for (var k = 1;k<myQuestions.length ;k++ )
    {
        document.write(myQuestions[k]);
        questionsChosen[i]= true;
    }
}

function checkAnswers()
{
    // use boolean to set whether a question has been asked or not. if it has then check here 
    // maybe something like if question1==true
    if (questionsChosen[1]= true)
    {
        var correctAnswer = document.myQuiz.question1[1].value;
        var userAnswer;
        for (i=0; i<document.myQuiz.question1.length; i++) 
        {
            if (document.myQuiz.question1[i].checked==true)
            {
                userAnswer =document.myQuiz.question1[i].value
            }
        }
        document.write("<br><br>Which one of these authors wrote and illustrated 'Calvin and Hobbes'?");
        document.write("<br>Your chosen answer is: "+userAnswer);
        if (correctAnswer == userAnswer)
        {
            document.write("<br>Correct!");
        }
        else document.write("<br>Incorrect... The answer was "+ correctAnswer);
    }


    if (questionsChosen[2]= true)
    {
        var correctAnswer = document.myQuiz.question2.value;
        var userAnswer;
        for (i=0; i<document.myQuiz.question2.length; i++) 
        {
            if (document.myQuiz.question2[i].checked==true)
            {
                userAnswer =document.myQuiz.question2[i].value
            }
        }
        document.write("<br><br>In the Calvin and Hobbes Comic, Who was Calvin's annoying neighbour?");
        document.write("<br>Your chosen answer is: "+userAnswer);
        if (correctAnswer == userAnswer)
        {
            document.write("<br>Correct!");
        }
        else document.write("<br>Incorrect... The answer was "+ correctAnswer);
    }
}

`

3 个答案:

答案 0 :(得分:0)

如果question2也是类似于question1的数组,则必须说明要检索其值的数组的索引并将其设置为正确的答案。问题2是数组本身。数组不能有值,但其元素具有值。所以它必须阅读问题2 [1] .value,或类似的东西。

答案 1 :(得分:0)

请将第var correctAnswer = document.myQuiz.question2.value;行更改为

var correctAnswer = document.myQuiz.question2[1].value;

把1,2,3,4 watever写成正确答案

答案 2 :(得分:0)

我已经尝试了下面的代码,它的工作非常好。

<html><head></head><body>
    <script>
    var questionsChosen = new Array();
    for (var i = 1;i<16 ;i++ )
    {
        questionsChosen[i]= false;
    }
    function randomQuestion()
    {
        var myQuestions = new Array();
        myQuestions[1] = "<tr><td><h4>Which one of these authors wrote and illustrated 'Calvin and Hobbes'?</h4></td></tr><tr><td><input type='radio' name='question1' value='Charles Schultz'>Charles Schultz<br><input type='radio' name='question1' id='correct' value='Bill Watterson'>Bill Watterson<br><input type='radio' name='question1' value='Jim Davis'>Jim Davis<br><input type='radio' name='question1' value='Tommy Peters'>Tommy Peters<br><hr/></td></tr>";

        myQuestions[2] = "<tr><td><h4>In the Calvin and Hobbes Comic, Who was Calvin's annoying neighbour?</h4></td></tr><tr><td><input type='radio' name='question2' id='correct' value='Susie Derkins'/>Susie Derkins<br><input type='radio' name='question2' value='Samantha Jones'/>Samantha Jones<br><input type='radio' name='question2' value='Sally Parker'/>Sally Parker<br><input type='radio' name='question2' value='Sarah Marsh'/>Sarah Marsh<br><hr/></td></tr>";

        for (var k = 1;k<myQuestions.length ;k++ )
        {
            document.write(myQuestions[k]);
            questionsChosen[i]= true;
        }
        document.write("<a href='Javascript:void(0)' onclick='checkAnswers();'>Check Answers</a>");
    }

    function checkAnswers()
    {
        // use boolean to set whether a question has been asked or not. if it has then check here 
        // maybe something like if question1==true
        if (questionsChosen[1]= true)
        {
            var correctAnswer = document.myQuiz.question1[1].value;
            var userAnswer;
            for (i=0; i<document.myQuiz.question1.length; i++) 
            {
                if (document.myQuiz.question1[i].checked==true)
                {
                    userAnswer =document.myQuiz.question1[i].value
                }
            }
            document.write("<br><br>Which one of these authors wrote and illustrated 'Calvin and Hobbes'?");
            document.write("<br>Your chosen answer is: "+userAnswer);
            if (correctAnswer == userAnswer)
            {
                document.write("<br>Correct!");
            }
            else document.write("<br>Incorrect... The answer was "+ correctAnswer);
        }


        if (questionsChosen[2]= true)
        {
            var correctAnswer = document.myQuiz.question2[1].value;
            var userAnswer;
            for (i=0; i<document.myQuiz.question2.length; i++) 
            {
                if (document.myQuiz.question2[i].checked==true)
                {
                    userAnswer =document.myQuiz.question2[i].value
                }
            }
            document.write("<br><br>In the Calvin and Hobbes Comic, Who was Calvin's annoying neighbour?");
            document.write("<br>Your chosen answer is: "+userAnswer);
            if (correctAnswer == userAnswer)
            {
                document.write("<br>Correct!");
            }
            else document.write("<br>Incorrect... The answer was "+ correctAnswer);
        }
    }

    </script>
    <form name='myQuiz'>
        <script>
            randomQuestion();
        </script>

    </form>
    </body></html>