TypeError no capturado no puede leer la propiedad 'nombre' de undefined

Question

Soy nuevo en Javascript / jquery y tengo un problema con una aplicación que estoy desarrollando. Recibo un TypeError no capturado cuando intento leer una propiedad de un objeto. Mi objetivo final es que el usuario ingrese algo en un cuadro de texto y, en base a esa entrada, haga un objeto con la entrada como propiedad de nombre. Aquí está mi código hasta ahora:

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

He buscado en el sitio otros problemas como este, pero todos están relacionados con API o problemas irrelevantes para los míos. Agradecería mucho cualquier ayuda.

javascript jquery object

1

Tyler Piscaglia 4 sep. 2014 a las 20:04

Answer 1

addPlayer() está incrementando su contador playerIndex después de que ha agregado el objeto a playerArray, que luego usa dentro de su controlador click. Según su código, no está claro qué intenta recuperar cuando llama a playerArray[playerIndex] (¿el último elemento agregado?), Pero simplemente me desharía del contador y usaría Array.prototype.push() en su lugar:

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

1

André Dion 4 sep. 2014 a las 16:16

Answer 2

Su primera ejecución es agregar 1 al playerIndex que inicializa en 0.

Cuando llegue a playerArray[playerIndex].name por primera vez, playerIndex es 1 y está buscando el primer valor (índice 0). Siempre estará un índice atrás.

1

Antiga 4 sep. 2014 a las 16:09

Answer 3

Mira este código

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

Porque el índice se incrementa y no hay nada como la posición que estás leyendo.

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

Personalmente no confiaría en el último índice. Devolvería el nuevo jugador cuando lo crees. Entonces no hay necesidad de lidiar con problemas de índice.

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

También score va a ser un problema.

1

epascarello 4 sep. 2014 a las 16:18

TypeError no capturado no puede leer la propiedad 'nombre' de undefined

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript