如何在JavaScript中将用户输入保存到变量中

How to save user input into variable in JavaScript?

本文关键字：输入 保存 变量 用户 JavaScript      更新时间：2023-09-26

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

我试图将这两个变量（nameOne，nameTwo）附加到p元素中。然而，当运行此代码时，我会得到NaN（不是数字），而不是作为字符串的用户输入。不知道我该如何实现这一目标！

这是因为您正在将DOM元素转换为数字。结果将是，em.，NaN。您想要的是元素的值。您可以通过读取.value属性来获取该值。

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

但是，由于要将值与字符串连接，因此不需要使用+运算符。

还要注意的是，不应该依赖全局变量（像Chrome这样的一些浏览器创建全局变量，引用具有相应ID的元素）来访问元素，它很脆弱，可能会失败。是的，它已经被HTML5标准化了，但在我看来，这是一种糟糕的做法。使用document.getElementById方法根据元素id选择元素。

@Vohuman和@guest271314回答了您的问题（NaN），但您的HTML和javascript中有几个语法错误，但我修复了我优化了您的javascript的问题。

Jsfidle

$(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>

相关文章：