未捕获的TypeError无法读取未定义的属性“name”

Question

我是JavaScript/jQuery的新手，我正在开发一个应用程序。尝试读取对象的属性时，我得到一个未捕获的TypeError。我的最终目标是让用户在一个文本框中输入一些内容，并基于该输入，创建一个对象，将该输入作为name属性。以下是我到目前为止的代码：

$(document).ready(function(){
    var playerArray = [];
    var playerIndex = 0;

    function player (name) {
        this.name = name;
        score = 0;
    };

    var addPlayer = function(name){
        playerArray[playerIndex] = new player(name);
        playerIndex++;
    };

    $('#add_players').on('click', '#btn-add', function(){
        var toAdd = $('input[name=playerNameInput]').val();
        addPlayer(toAdd);
        $('#playerList').append('<div class="ui-block-a" style="padding:1em">' + playerArray[playerIndex].name + '</div>');
    });
});

我在网站上搜索过类似的其他问题，但它们都是处理API或与我无关的问题。如果有任何帮助，我将不胜感激。

Answer 1

您的第一次运行是将1添加到在0初始化的PlayerIndex中。

当您第一次到达playerarray[playerIndex].name时，playerIndex为1，您正在查找第一个值（索引0）。你永远落后一个指数。

Answer 2

AddPlayer()将对象添加到PlayerArray中后，将递增PlayerIndex计数器，然后在Click处理程序中使用该对象。根据您的代码，在调用PlayerArray[playerIndex]（添加的最后一个元素？）时，您试图检索的内容并不清楚但我只需要去掉计数器，而使用array.prototype.push():

$(document).ready(function(){
    var playerArray = [];

    function player (name) {
        this.name = name;
        score = 0;
    }

    var addPlayer = function(name){
        playerArray.push(new player(name));
    };

    $('#add_players').on('click', '#btn-add', function(){
        var toAdd = $('input[name=playerNameInput]').val();
        addPlayer(toAdd);

        // playerArray[playerArray.length - 1] will always retrieve the last element in the array
        // use playerArray[0] if you always want the first
        $('#playerList').append('<div class="ui-block-a" style="padding:1em">' + playerArray[playerArray.length - 1].name + '</div>');
    });
});