带有单选按钮的 JavaScript 表单答案

【问题标题】：JavaScript Form with radiobuttons带有单选按钮的 JavaScript 表单
【发布时间】：2012-10-24 15:54:18
【问题描述】：

我正在尝试在 javascript 中进行测验，在其中我使用单选按钮检查提供给用户的答案。它检查第一个条目没问题，但是当它移动到第二个问题时，它会抛出一个未定义的类型错误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);
    }
}

【问题讨论】：

在解析页面后调用document.write() 时会发生这种情况。它会自动调用“document.open()”来清除所有以前的 JS 和 HTML。
那么我有办法解决这个问题吗？我是否只保留写 stmnts 直到生成所有答案？
刚刚再次检查并更改了 document.write() stmnts 以将其全部写入一个变大的字符串。然后它一口气在最后打印出来！感谢您的帮助！

标签： javascript html forms radio-button

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

放1、2、3、4水为正确答案

【讨论】：

是的，我有，但实际上复制到了错误的 txt 中。我正在尽一切努力让它发挥作用。当我放回数组位置时，它仍然给出错误！

【解决方案3】：

我已经尝试了下面的代码，它工作得很好。

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

【讨论】：