Uncaught TypeError for for loop

Question

У меня есть массив объектов (игроков), и у этих объектов есть метод increment, который увеличивает объектную переменную.

Внутри for петли, когда я называю players[x].increment(); я получаю следующее сообщение об ошибке:

intex.html:56 Uncaught TypeError: Cannot read property 'increment' of undefined

for (var x = 0; x < players.length; x++) { 
    $("#button-" + x).click(function() { //I select one of the buttons 
     players[x].increment(); //Here is the problem 
     //This part forwards doesn't matter 
     $("#score-" + x + "-n").text(players[x].score); 
     if (players[x].score >= 10) { 
      alert(players[x].name + " WINS!"); 
      $("#alertz").html('<div class="alert alert-info" style="text-align:center;" >' + players[x].name + 'WINS!!!</div>'); 
     }; 
    }); 
}; 

Когда я звоню, например players[0].increment(); вне цикла, у меня нет никаких проблем.

Если это непонятно. У меня есть простая страница с двумя кнопками. На основе какой кнопки я нажимаю, она увеличивается и отображает переменную.

Когда я использую console.log(var) в increment части, я получаю 2, но players[2] не существует, так что я думаю, что это проблема, но я не знаю точно, или как это исправить.

Answer 1

Ваш итератор равен player.length при запуске события click, а обработчик кликов использует этот итератор, пытаясь получить доступ к индексу, который выходит за пределы диапазона для вашего игрового массива.

Попробуйте поставить атрибут указательный на кнопке, как это вместо:

<button class="player-button" data-player-index="0">Increment</button> 
<button class="player-button" data-player-index="1">Increment</button> 

$('.player-button').click(function() { 
    var index = $this.attr('data-player-index'); 
    players[index].increment(); 
});