javascript - 数组方法导致JS完全不起作用。如何将值保存到二维数组中并显示它？

Question

感谢 Thunda 和 ArtyMcFly 的大力帮助，该功能现在可以正常工作。 完整代码请看这里:http://plnkr.co/edit/Imcl53?p=info 感谢桑达的建议。 首先，请让我为如此庞大的代码量表示歉意。我只是不知道如何才能完整地解释我的问题......

我是 JS 新手，但不是编程。我想做以下事情:

用户输入他的名字、姓氏、年龄并选择他的性别。单击“开始”按钮，就会根据构造函数 Mitarbeiter 创建一个对象。到目前为止，一切正常，除了我想将值保存到二维数组中。 runningNr 既可以用作计数器，也可以用作 ID。之后我想在表格中显示二维数组。

我的问题:显然我的 saveToArray() 和 showArray() 方法导致我的整个 JS 代码不再工作。我通过注释掉这两个方法以及各自的 this.saveToArray = saveToArray() 和 this.showArray = showArray() 来测试这一点。

我也不太确定如何实际实现我的 showArray() 方法，但如果我什至无法保存值，那么考虑这个就没有意义了。 :/

此外，我只能使用 JS 来完成此任务。

var runningNr = 0;
var employee = new Array(); // 2D-Array

// Konstruktor
function Mitarbeiter(f, l, a, g) //f = forename, l = lastname, a = age, g = gender
{
    var fname = f;
    var lname = setLName(l);
    var age = a;
    var gender;
    if (g == "Mann")
        gender = false;
    else
        gender = true;
    this.forename = getFName();
    this.lastname = getLName();
    this.age = getAge();
    this.gender = getGender();
    var total = runningNr + 1; // total of objects. runningNr +1 cause runningNr starts at 0
    this.total = getTotalObj();
    var checkboxes = document.forms.meinFormular.elements.gender;
    this.saveToArray = saveToArray();
    /* this.showArray = showArray(); */

    // Getters coming your way


    // Setters coming your way
    function setLName(x)
    {
        lname = x;
    }

    function saveToArray(runningNr, fname, lname, age, gender)
    {
        employee[Id] = new Array();
        employee[Id]["ID"] = runningNr
        employee[Id]["Firstname"] = fname;
        employee[Id]["Lastname"] = lname;
        employee[Id]["Age"] = age;
        employee[Id]["Gender"] = gender;
        runningNumber++; // Increment as this is the ID as well as the row of 2D-Array
    }

    function showArray() // Creating a table to show all informations about employees
    {
        var myTable = "<table>";
        myTable += "<tr>";
        myTable += "<th> ID </th>";
        myTable += "<th> Vorname </th>";
        myTable += "<th> Nachname </th>";
        myTable += "<th> Alter </th>";
        myTable += "<th> IstFrau </th>";
        myTable += "</tr>";

        for (var i = 0; i <= runningNumber; i++)
        {
            for (var j = 0; j <= 5; j++)
            {
                myTable += "<tr>";
                myTable += "<td>"
                employee[i][j]
                "</td>";
            }
            myTable += "</tr>";
        }
        myTable += "</table>";

        document.getElementById("showContent").innerHTML = myTable;
    }
}

function createObject(fname, lname, a, g)
{
    this.g = g[g.selectedIndex].text; // Selected gender (Mann or Frau) is given as a parameter  to Mitarbeiter();
    var obj = new Mitarbeiter(fname, lname, a, this.g);
    obj.saveToArray
}

<input type="text" name="forename" id="forename" value="test">
<input type="text" name="lastname" id="lastname" value="test">
<input type="text" name="age" id="age" value="1"> 
<select id="gender" name="gender" size="2">
<option selected> Mann </option>
<option> Frau </option>
</select>           
<input type="button" value="Start" onclick="createObject(this.form.forename.value, this.form.lastname.value, this.form.age.value, this.form.gender)">
<input type="button" value="Show Obj" onclick="obj.showArray">

<div id="showContent">
</div>

Answer 1

所以我发现了几个问题。 (请参阅此 fiddle 了解工作代码...通常您应该分离功能，但它做了一些奇怪的事情，所以我将所有内容都放入了 HTML 插槽中，因为时间不够。代码在之后显示了员工您已创建员工并选择显示)

您需要<form>围绕您的输入值的标签。

您的saveToArray()方法使用 javascript 对象语法 employee[Id]["STRING"] = value我认为只需用索引替换字符串就可以解决问题。

否则你必须将其更改为对象数组，因此 employee[Id] = new Array()至employee[Id] = {}并在 showArray()你必须做 for(var key in employee[i])它迭代 javascript 对象的键。

此外，Id从未在任何地方定义过。你永远不会将参数传递给 this.saveToArray

function saveToArray(runningNr, fname, lname, age, gender)
{
    var Id = runningNr; //This works for Id, not sure if it is what you wanted though.
    employee[Id] = new Array();
    employee[Id][0] = runningNr
    employee[Id][1] = fname;
    employee[Id][2] = lname;
    employee[Id][3] = age;
    employee[Id][4] = gender;
    this.runningNr++; // Increment as this is the ID as well as the row of 2D-Array
}

此外，范围也存在一些问题。我搬家了showArray()所以它是全局的并改变了一些语法。

function showArray() // Creating a table to show all informations about employees
{
    var myTable = "<table>";
    myTable += "<tr>";
    myTable += "<th> ID </th>";
    myTable += "<th> Vorname </th>";
    myTable += "<th> Nachname </th>";
    myTable += "<th> Alter </th>";
    myTable += "<th> IstFrau </th>";
    myTable += "</tr>";

    for (var i = 0; i < runningNr; i++)
    {
        myTable += "<tr>";
        for (var j = 0; j <= employee[i].length; j++)
        {

            myTable += "<td>"+employee[i][j]+"</td>";
        }
        myTable += "</tr>";
    }
    myTable += "</table>";

    document.getElementById("showContent").innerHTML = myTable;
}