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

Question

I'm new to Javascript/jquery and having an issue with an app I'm developing. I am getting an Uncaught TypeError when trying to read a property of an object. My ultimate goal is for the user to enter something in a text box and based on that input, make an object with the input as a name property. Here is my code so far:

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

I have searched the site for other issues like this but they are all dealing with APIs or irrelevant issues to mine. I would greatly appreciate any help.

Answer 1

Look at this code

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

Because index is incremented and there is nothing like the position you are reading.

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

---

Personally I would not rely on the last index. I would return the new player when you create it. Than there is no need to deal with index issues.

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

Also score is going to be a problem.

Answer 2

Your first run is adding 1 to the playerIndex that you initialize at 0.

By the time you get to playerArray[playerIndex].name for the first time, playerIndex is 1 and you are looking for the first value (index 0). You will always be one index behind.

Answer 3

addPlayer() is incrementing your playerIndex counter after you've added the object to playerArray , which you then use inside your click handler. It's not clear based on your code what you're trying to retrieve when you call playerArray[playerIndex] (the last element added?) but I would just get rid of the counter and use Array.prototype.push() instead:

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