How to save user input into variable in JavaScript?

Question

Given the following HTML:

<div id= "playerNames" class="playerInfo">
            <form name="form1" method="post" action="http://examples.funwebdev.com/process.php" id="newGame">
                <p id= "userInput">
                    <label>Player 1 name: </label></br><input type="text" name="p1" id="nameOne" value="" required></input></br>
                    <label>Player 2 name: </label></br><input type="text" name="p2" id="nameTwo" required></input> <input id="submit" type="submit" value="New Game"/>
                </p>
            </form>
        </div>

And the following javascript:

 $(document).ready(function () {
    console.log("jQuery is ready to use...");
    $("#newGame").on("submit", newGameListener);
});

function setUpUsers(){
    var player_One = document.getElementById("nameOne").value;
    var player_Two = document.getElementById("nameTwo").value;
    document.getElementById("pTurns").innerHTML = (+nameTwo+ ", its your turn");
    document.getElementById("pScores").innerHTML = (+nameOne+ ": 50pts </br>" (+nameTwo+ ": 50pts </br>"
}

function newGameListener(e) {
    e.preventDefault();
    setUpUsers();
}

I am trying to append these two variables (nameOne, nameTwo) within p elements. However when this code is run I get NaN (Not a Number) Instead of the user input as a string. Not sure how I should go about achieving this!

Unclosed parenthesis syntax errors at (+nameOne+ ": 50pts </br>" (+nameTwo+ — guest271314
– guest271314, Commented Dec 6, 2015 at 5:21

Ram · Accepted Answer · 2015-12-06 05:24:18Z

3

That's because you are converting a DOM element to a number. The result will be, em.., NaN. What you want is the value of the element. You can get the value by reading the .value property.

document.getElementById("pTurns").innerHTML = (+nameTwo.value + ", its your turn");

However, since you want to concatenate the value with a string there is no need to use + operator.

Also note that should not rely on the global variables (some browsers like Chrome creates global variables that refer to elements that have the corresponding IDs) for accessing the elements, it's fragile and may fail miserably. Yes, it has been standardized by HTML5, but in my opinion it's a bad practice. Use the document.getElementById method for selecting the elements by their id.

edited Dec 6, 2015 at 5:24

answered Dec 6, 2015 at 5:00

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

guest271314 Over a year ago

Noticed that nameTwo, nameOne not appear defined at js at Question ?

Ram Over a year ago

@lewisfurlan-lowry Are you still using the + operator? Try with removing it. If the user input is not a number then the operator returns NaN.

Alex · Accepted Answer · 2015-12-06 05:25:14Z

1

As @Vohuman and @guest271314 answered about your problem(NaN) but you have several syntax error in your HTML and javascript, however I fixed that I optimized your javascript.

Jsfiddle

$(document).ready(function() {
  console.log("jQuery is ready to use...");
  $("#newGame").submit(function(e) {
    e.preventDefault();
    var player_One = $('#nameOne').val();
    var player_Two = $('#nameTwo').val();
    $('#pTurns').html(player_One + ", its your turn");
    $('#pScores').html(player_One + ": 50pts </br>" + player_Two + ": 50pts </br>");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="playerNames" class="playerInfo">
  <form name="form1" method="post" id="newGame">
    <p id="userInput">
      <label>Player 1 name:</label>
      <br />
      <input type="text" name="p1" id="nameOne" value="" required />
      <br />
      <label>Player 2 name:</label>
      <br />
      <input type="text" name="p2" id="nameTwo" required />
      <input id="submit" type="submit" value="New Game" />
    </p>
  </form>
</div>

<p id="pTurns"></p>
<p id="pScores"></p>

edited Dec 6, 2015 at 5:25

answered Dec 6, 2015 at 5:17

Alex

8,6956 gold badges40 silver badges51 bronze badges

2 Comments

mplungjan Over a year ago

Also very bad idea to name or use id=submit. Lastly he should use $("#newGame").on("submit" instead of the click event

Alex Over a year ago

@lewisfurlan-lowry you should give upvote to Vohuman because I answered half of your question.

Collectives™ on Stack Overflow

How to save user input into variable in JavaScript?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related