title: Uncaught TypeError cannot read property 'name' of undefined
body: <p>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:</p>
  
  <pre><code>$(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('&lt;div class="ui-block-a" style="padding:1em"&gt;' + playerArray[playerIndex].name + '&lt;/div&gt;');
      });
  });
  </code></pre>
  
  <p>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. </p>