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

给定以下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>

玩家1姓名：


玩家2姓名：

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

$（文档）.ready（函数（）{
log（“jQuery已准备好使用…”）；
$（#newGame”）。在（“提交”，newGameListener）；
});
函数setUpUsers（）{
var player_One=document.getElementById（“nameOne”）.value；
var player_Two=document.getElementById（“nameTwo”）.value；
document.getElementById（“pTurns”）.innerHTML=（+nameTwo+”，轮到你了）；
document.getElementById（“pScores”）.innerHTML=（+nameOne+”：50pts
“（+nameTwo+”：50pts
”
}
函数newGameListener（e）{
e、 预防默认值（）；
setUpUsers（）；
}

---

我试图将这两个变量（nameOne，nameTwo）附加到p元素中而不是将用户输入作为字符串。不确定我应该如何实现这一点！

这是因为您正在将DOM元素转换为数字。结果将是em..

NaN

。您需要的是元素的值。您可以通过读取

.value

属性来获取值

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

但是，由于要将值与字符串连接起来，因此无需使用

+

运算符

---

还请注意，不应依赖全局变量（一些浏览器，如Chrome，会创建全局变量，引用具有相应ID的元素）对于访问元素，它是脆弱的，可能会失败。是的，但在我看来这是一种糟糕的做法。使用

文档.getElementById

方法根据元素id选择元素。

这是因为您正在将DOM元素转换为数字。结果将是em..

NaN

。您需要的是e的值元素。您可以通过读取

.value

属性来获取该值

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

但是，由于要将值与字符串连接起来，因此无需使用

+

运算符

---

还请注意，不应依赖全局变量（一些浏览器，如Chrome，会创建全局变量，引用具有相应ID的元素）对于访问元素，它是脆弱的，可能会失败。是的，但我认为这是一种不好的做法。使用

文档。getElementById

方法根据元素id选择元素。

正如@Vohuman和@guest271314回答了您的问题（

NaN

）但是你的HTML和javascript中有几个语法错误，但是我修正了我优化了你的javascript

$（文档）.ready（函数（）{
log（“jQuery已准备好使用…”）；
$（“#新游戏”）.submit（函数（e）{
e、 预防默认值（）；
var player_One=$（'#nameOne'）.val（）；
var player_Two=$（'#name Two'）.val（）；
$（'pTurns'）.html（player#One+“，轮到你了”）；
$（'pScores'）.html（player#u One+“：50pts
”+player#u Two+“：50pts
”；
});
})；

玩家1姓名：




玩家2姓名：

因为@Vohuman和@guest271314回答了您的问题（

NaN

），但是您的HTML和javascript中有几个语法错误，但是我修复了优化您的javascript的问题

$（文档）.ready（函数（）{
log（“jQuery已准备好使用…”）；
$（“#新游戏”）.submit（函数（e）{
e、 预防默认值（）；
var player_One=$（'#nameOne'）.val（）；
var player_Two=$（'#name Two'）.val（）；
$（'pTurns'）.html（player#One+“，轮到你了”）；
$（'pScores'）.html（player#u One+“：50pts
”+player#u Two+“：50pts
”；
});
})；

玩家1姓名：




玩家2姓名：

注意到

nameTwo

，

nameOne

在

js

中没有出现定义的问题？@lewisfurlan lowry您是否仍在使用

+

操作符？尝试删除它。如果用户输入不是数字，则操作符返回

NaN

。注意到

nameTwo>，
nameOne
否t在问题中的
js
处出现定义？@lewisfurlan lowry您是否仍在使用
+
运算符？尝试将其删除。如果用户输入不是数字，则运算符返回
NaN
。
处未闭合的括号语法错误（+nameOne+“：50pts
”（+nameTwo+
未闭合括号语法错误出现在
（+nametone+“：50pts
”（+nameTwo+
命名或使用id=submit也是一个非常糟糕的主意。最后，他应该使用$（“#newGame”）。在（“submit”）上而不是点击event@lewisfurlan-lowry你应该放弃投票给Vohuman，因为我回答了你一半的问题。命名或使用id=submit也不是一个好主意。最后，他应该使用$（“#newGame”）。在（“submit”上，而不是点击event@lewisfurlan-lowry你应该放弃投票给Vohuman因为我回答了你一半的问题。