如何將用戶輸入保存到JavaScript中的變量中？

Question

鑒於以下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>

和以下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();
}

我正在嘗試在p元素內附加這兩個變量（nameOne，nameTwo）。 但是，當運行此代碼時，我得到的是NaN（不是數字），而不是用戶輸入的字符串。 不知道我應該如何實現這一目標！

Answer 1

那是因為您要將DOM元素轉換為數字。 結果將是，例如NaN 。 您想要的是元素的值。 您可以通過讀取.value屬性來獲取值。

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

但是，由於要使用字符串連接值，因此無需使用+運算符。

還要注意，訪問元素時不應依賴全局變量（某些瀏覽器（例如Chrome瀏覽器會創建引用具有相應ID的元素的全局變量）），它很脆弱，可能會失敗。 是的， 它已經通過HTML5進行了標准化 ，但是我認為這是一個不好的做法。 使用document.getElementById方法通過元素ID選擇元素。

Answer 2

由於@Vohuman和@ guest271314回答了有關您的問題的內容（ NaN ），但您的HTML和javascript中有一些語法錯誤，但是我已修復了我優化了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>