嘗試重置JavaScript表單會使表單消失

Question

我創建了一個表單，該表單從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>

提示會很棒。 謝謝！

Answer 1

要不使用document.write，可以將所有輸出設置為字符串，然后將主體或元素innerHTML設置為該輸出。

示例： jsfiddle示例

Answer 2

為什么不只使用帶有復位類型的輸入呢？

<input type="reset" />

您遇到的問題是document.write可能會關閉表單本身，因為您沒有在頁面上編寫正確的html。

您應該只使用html標記創建一個字符串，然后將其寫成一行。

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

更好的是，學習使用appendChild和createElement 。