二维数组填充突然停止

Question

我有一个具有两种形式的简单html，每种形式都有四个输入字段：

<!DOCTYPE html>

<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="initial-scale=1" />
<title>Test3</title>
</head>

<body> 

<h1>Two Forms</h1>

<form id="form1" name="form1" method="post" action="test.php">

    <label for="name">F1 Name*</label>
    <input type="text" name="name" id="name"/>
    <br/>

    <label for="phone">*Phone*</label>
    <input type="text" name="phone" id="phone"/>
    <br/>

    <label for="email">Email</label>
    <input type="text" name="email" id="email"/>
    <br/>

    <label for="postcode">*Postcode</label>
    <input type="text" name="postcode" id="postcode" class="input-textfield"/>
    <br/>

    <input type="submit" name="Submit" value="Submit" />

</form>
<br/><br/>


<form id="form2" name="form2" method="post" action="test.php">

    <label for="name2">F2 Name*</label>
    <input type="text" name="name2" id="name2"/>
    <br/>

    <label for="phone2">*Phone*</label>
    <input type="text" name="phone2" id="phone2"/>
    <br/>

    <label for="email2">Email</label>
    <input type="text" name="email2" id="email2"/>
    <br/>

    <label for="postcode2">*Postcode</label>
    <input type="text" name="postcode2" id="postcode2" class="input-textfield"/>
    <br/>

    <input type="submit" name="Submit2" value="Submit" />

</form>

<script type="text/javascript" src="check-form.js"></script>

</body>
</html>

并且我试图在每个表单之前插入一个段落，并在每个输入字段之后插入一个跨度以显示消息：

var nlForms = []; var arPForSubmitMsg = []; // 1d arrays for forms.

var arNlInputs = new Array([]); // 2d arrays for inputs.
var darSpanForErrorMsg = new Array([]); // 2d arrays for inputs.

window.onload = initialise;

function initialise() {

// for creating and inputing paragraph and span elements for displaying submit and error messages.
nlForms = document.getElementsByTagName('form');    
for (f = 0; f < nlForms.length; f++) {
    arNlInputs[f] = nlForms[f].getElementsByTagName("input"); // store list into array makeing it double.
}

// create paragraph elements of class 'submitmsg'and insert them before each form.
for (f = 0; f < nlForms.length; f++) {
    arPForSubmitMsg[f] = document.createElement('p');
    arPForSubmitMsg[f].setAttribute('class', 'submitmsg');
    arPForSubmitMsg[f].innerHTML = "hello form " + f;
    var nodeFormParent = nlForms[f].parentNode;
    nodeFormParent.insertBefore(arPForSubmitMsg[f], nlForms[f]);
}

// create span elements of class 'errormsg' and
// insert them after each input which is required or needs to be validated.     

for (f = 0; f < nlForms.length; f++) {

    for (i=0; i < arNlInputs[f].length; i++) {

// STOP - here it stops when f=1 and i=0 (it does get inside this for loop)

        darSpanForErrorMsg[f][i] = document.createElement("span");

// but it doesn't get to this point when f=1 and i=0;

        darSpanForErrorMsg[f][i].innerHTML = "hello span " + i;
        darSpanForErrorMsg[f][i].class = "errormsg";

        var nodeInputParent = arNlInputs[f][i].parentNode;
        var nodeInputNextSibling = arNlInputs[f][i].nextSibling ;
        nodeInputParent.insertBefore(darSpanForErrorMsg[f][i], nodeInputNextSibling);

    }
}


} // end initialise().

第一种形式的字段填充得很好，但第二种形式的字段却没有填充。 我检查了一下，当它进入第二个for循环时，代码停止了，以便当f = 1和i = 0时再次开始迭代。 我很困惑，无法了解这里发生的一切。 我将不胜感激任何帮助或建议。

Answer 1

我想通了（经过一整夜）:-)：

即使将2D数组声明为2D（带有= array（[]）;），仍然需要将数组中的每个元素声明为2D数组。 因此，缺少的代码行是：

darSpanForErrorMsg[f] = [];

并且应将其放置在第一个for循环中的第一行。 初学者错误； 我希望它可以帮助陷入困境的其他人。