如何将用户输入保存到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!

Answer 1

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.

Answer 2

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>