javascript - 如何在 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 元素转换为数字。结果将是，em..，NaN。你想要的是元素的值。您可以通过读取 .value 属性来获取该值。

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

但是，由于您想要将值与字符串连接起来，因此无需使用 + 运算符。

另请注意，不应依赖全局变量(某些浏览器(例如 Chrome)创建引用具有相应 ID 的元素的全局变量)来访问元素，它很脆弱，可能会严重失败。是的，it has been standardized by HTML5 ，但在我看来这是一种不好的做法。使用 document.getElementById 方法通过 ID 选择元素。