Question

我是Javascript / jquery的新手，并且正在开发我正在开发的应用程序的问题。我在尝试读取对象的属性时遇到未捕获的TypeError。我的最终目标是让用户在文本框中输入内容并根据该输入创建一个带有输入的对象作为名称属性。到目前为止，这是我的代码：

$(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

看看这段代码

var addPlayer = function(name){
     playerArray[playerIndex] = new player(name);  //you store it at an index
     playerIndex++;  //you increment
 };

因为索引递增而且没有像您正在阅读的位置那样。

console.log(playerArray[playerIndex]);  //undefined
console.log(playerArray[playerIndex-1]);  //the last entry you added

我个人不会依赖最后一个索引。我会在你创建它时返回新玩家。比没有必要处理索引问题。

var playerArray = [];
var playerIndex = 0;

function Player (name) {
    this.name = name;
    score = 0;  //this will be a problem....
};
var addPlayer = function(name){
    var user = new Player(name);
    playerArray.push(user);
    return user;
};

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

同样score也会成为一个问题。

Answer 2

您的第一次运行是在您初始化为0的playerIndex中添加1。

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

Answer 3

addPlayer()在之后将playerIndex计数器增加你已将对象添加到playerArray，然后在click中使用处理程序。根据您的代码，当您调用playerArray[playerIndex]（最后添加的元素？）时，您尝试检索的内容并不清楚，但我只是摆脱了计数器并使用{{3}而不是：

$(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>'); }); });

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

3 个答案: