尝试重置javascript表单使表单消失

时间:2010-10-19 21:39:12

标签: javascript forms reset

我创建了一个表单,从16个数组中随机选择12个T / F问题,以随机顺序显示它们并在结尾处对其进行全部评分。问题是我无法在刷新时清除表单。当我尝试使用几乎任何方法时,形式,问题和所有方法都会消失。

然而,重置按钮确实有效。

以下是表格:

<script type="text/javascript">
//Define Questions Array
var q = new Array();
    q[0] = "I have fingers";
    q[1] = "I have toes";
    q[2] = "I have gills";
    q[3] = "I have an appendix";
    q[4] = "I can swim";
    q[5] = "I can fly";
    q[6] = "I am a human";
    q[7] = "I own a PC";
    q[8] = "I own a Mac";
    q[9] = "I own a home";
    q[10] = "I own property in Hawaii";
    q[11] = "I speak english";
    q[12] = "I speak Cantonese";
    q[13] = "I have my driver's license";
    q[14] = "I have my pilot's license";
    q[15] = "I am in the military";
//Define Answers Array
var a = new Array();
    a[0] = "True";
    a[1] = "True";
    a[2] = "False";
    a[3] = "False";
    a[4] = "True";
    a[5] = "False";
    a[6] = "True";
    a[7] = "True";
    a[8] = "True";
    a[9] = "False";
    a[10] = "True";
    a[11] = "True";
    a[12] = "False";
    a[13] = "True";
    a[14] = "False";
    a[15] = "False";

var order = 0; //used to count things
var rand; //random number
var nQ = new Array(16); //re-ordered questions
var nA = new Array(16); //matching re-ordered answers
var uA = new Array(12); //user's answers
var x = 1; //counting variable
var s; //counting variable
var score = 0; //user's score

//This function records the user's input
function recordIt(n,TF)
{
    uA[n] = TF;
}

//This function scores the user's input and display's how many they got correct
function scoreIt()
{
for (s in uA)
{
    if ( uA[s] == nA[s])
    {
        score++;
    }
}
alert(score);
}

//This function checks to see if all of the questions have re-ordered
function allX(arr)
{
    var count = 0;
    while ( count != 16)
    {
        if (arr[count] == "X")
        {
            count++;
        }
        else
        {
            break;
        }
    }
    if (count == 16)
    {
        return true;
    }
    else
    {
        return false;
    }
}

//This randomly organizes the questions and answers
while (allX(q) == false)
{
    rand = Math.floor(Math.random()*16)
    if (q[rand] != "X")
    {
        nQ[order] = q[rand];
        nA[order] = a[rand];
        q[rand] = "X";
        a[rand] = "X";
        order++;
    }
}

//This is the actual form that picks the first 12 questions from the nQ (new questions) array
document.write("<form name=oquiz>");
while (x < 13)
{
document.write(x + ". " + nQ[x]);
document.write("<br/>");
document.write("<input type=radio name=\"" + "q" + x + "\" value=\"True\" onClick=\"recordIt(" + x + ",this.value)\"> True");
document.write("<br/>");
document.write("<input type=radio name=\"" + "q" + x + "\" value=\"False\" onClick=\"recordIt(" + x + ",this.value)\"> False");
document.write("<br/>");
x++;
}
document.write("<input type=\"button\" value=\"Reset Form\" onClick=\"this.form.reset()\" />")
document.write("<input type=\"button\" value=\"Score this quiz\" onClick=\"scoreIt()\" />")
document.write("</form>");
</script>

提示将是奇妙的。谢谢!

2 个答案:

答案 0 :(得分:1)

不使用document.write你可以将所有输出设置为字符串,然后将body或元素innerHTML设置为该输出。

示例:jsfiddle example

答案 1 :(得分:0)

为什么你不只是使用具有重置类型的输入?

<input type="reset" />

你遇到的问题是document.write可能正在关闭表单本身,因为你没有在页面上写正确的html。

您应该只使用html标记创建一个字符串,然后将其写在一行中。

var str = "<form>";
str += "<input ... />";
str += "</form>";
document.write(str);

更好的是,学会使用appendChildcreateElement