CODEWITHSUNDEEP
javascriptjqueryobject
Tyler Piscaglia
Tyler Piscaglia

Reputation: 21

Uncaught TypeError cannot read property 'name' of undefined

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.

Upvotes: 1

Views: 1840

Answers (3)

epascarello
epascarello

Reputation: 207501

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.

Upvotes: 1

Andr&#233; Dion
Andr&#233; Dion

Reputation: 21708

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

Upvotes: 1

Antiga
Antiga

Reputation: 2274

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.

Upvotes: 1

Related Questions