Attempts to reset javascript form make form disappear.

Question

I created a form that randomly selects 12 T/F questions from an array of 16, displays them in a random order and will score it all at the end. The problem is that I cannot get the form to clear on refresh. When I try with nearly any method, the form, questions and all disappears.

The reset button, however, does work.

Here's the form:

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

Hints would be marvelous. Thanks!

Answer 1

And why are you not just using an input with a type of reset?

<input type="reset" />

Problem you have is the document.write is probably closing the form itself since you are not writing correct html to the page.

You should just create one string with the html markup and than write it out in one line.

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

better yet, learn to use appendChild and createElement.

Answer 2

to not use document.write you could set all the output to a string then set the body or an elements innerHTML to that output.

example: jsfiddle example