Build an object from a form submit in javascript/jquery

Question

I'm working on a project where I need to read a form, then create objects from the form, which can then be used to keep track of players in the game, and their score.

This is the constructor:

function Player(x) {
  this.playerName = x;
  this.playerScore = 0;
}

Here's the form:

    <form id="PlayerName">
      <label for="playerName1"><h3>Player 1, please input your name:</h3></label>
      <input type="text" id="playerName1"></input><br>
      <button type="submit" name="playerName">Submit Name</button>
    </form>

Here's the JS/jQuery:

  $("form#PlayerName").submit(function(event){
    event.preventDefault();
    var inputName1 = $("input#playerName1").val();
    var player1 = new Player(inputName1);
  });

When I run the debugger, it finds the object and looks like it's creating it, with the name in the proper spot then when I try to run the following function against that object, it says that it's not found, and I'm totally stumped:

  $("form#HoldDice").submit(function(event) {
    event.preventDefault();
        HoldTheDice();
        if (currentPlayer !== 1) {
          $("span#PlayerOneScore").text(player1.playerScore);
          $("span#DiceRoll").text("Player One, you've chosen to hold the dice, you added " + addscore + " to your score.")
          addscore = 0; 
}... 

currentPlayer is a variable used to keep track of which players turn it is, I don't think it's relevant to this question though.

Help?

Answer 1

your player1 is a function local variable you declare within submit function. Its life time only within the function. You need either propagete it into global object so that another fuction can use, or you declare outside submit function, so that you assigned it when user submit. Reuse it when you want to.

$("form#PlayerName").submit(function(event){
  event.preventDefault();
  var inputName1 = $("input#playerName1").val();
  var player1 = new Player(inputName1); // function local variable
});

Try this

Player1 player1 = new Player();
$("form#PlayerName").submit(function(event){
  event.preventDefault();
  var inputName1 = $("input#playerName1").val();
  player1 = new Player(inputName1); // function local variable
});

$("form#HoldDice").submit(function(event) {
  event.preventDefault();
      HoldTheDice();
      if (currentPlayer !== 1) { // assuming this is assgined too, else check undefined
        $("span#PlayerOneScore").text(player1.playerScore);
        $("span#DiceRoll").text("Player One, you've chosen to hold the dice,   you added " + addscore + " to your score.")
        addscore = 0; 
 }... 

class and array of class

Take a look on how to create class. https://developer.mozilla.org/my/docs/Web/JavaScript/Reference/Classes

how to create array of custom object. Create an array in javascript of custom objects