二维数组填充突然停止答案

【问题标题】：2d array populating stops abruptly二维数组填充突然停止
【发布时间】：2014-08-10 07:22:16
【问题描述】：

我有一个包含两个表单的简单 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().

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

【问题讨论】：

标签： arrays 2d populate

【解决方案1】：

我想通了（经过一个漫长的夜晚）:-) :

即使 2D 数组被声明为 2D（使用 = array([]); ），数组中的每个元素仍需要声明为数组以使其成为 2D。因此缺少的代码行是：

darSpanForErrorMsg[f] = [];

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

【讨论】：