如何在javascript中使用输入文本的值答案

【问题标题】：How to use a value of an input text in javascript如何在javascript中使用输入文本的值
【发布时间】：2020-01-17 09:42:45
【问题描述】：

我正在我的“猪游戏”上构建一个功能，因此用户可以通过在输入字段中输入来设置自己的获胜值。

我需要使用用户在<input type="text"> 中输入的值，以更改我的 JavaScript 代码中的行为。

我将我的输入写为：

<div class ="newInputScore">
    <label for="fixGoal">SET THE GOAL :</label><br>
    <input name = "fixGoal" type = "text" id = "fixGoal">
</div>

我需要在我的 JS 代码中使用用户在上述输入中写入的值。到目前为止，我试过了：

let choosenScore = parseInt(document.getElementById('fixGoal').value);
if (scores[activePlayer] >= 100 || scores[activePlayer] >= choosenScore){...

...但似乎我的输入返回值 0，因为玩家实际上是在使用上面的代码以 > 0 的分数获胜。我控制台 log()'edchoosenScore 它返回我 NaN，然后在下面的行中未定义。我在那里想念什么？提前致谢。

项目链接（没有出现骰子，因为文件在我的电脑上）：https://codepen.io/Peyo5202/pen/dybqyXV

【问题讨论】：

"我的输入似乎返回了一个值 0" 。你是不是记录下来看看值是不是真的为0？
使用控制台日志检查该值是否真的为0，并将choosenScore解析为一个整数，现在它是一个字符串。使用控制台日志检查 score[activePlayer] 的值
我在控制台登录了“choosenScore”，它现在返回 NaN，并且在下面的行中未定义。我实际上将 parseInt() 添加到了 choosenScore，尽管我不确定我写得好不好。还有其他建议吗？
请附上minimal reproducible example。您可以使用Stack Snippets 这样做。
parseInt 在一个空字符串上给你NaN（不是数字）

标签： javascript html input

【解决方案1】：

请提供更多详细信息，如您所见，您的代码有效...

let choosenScore = parseInt(document.getElementById('fixGoal').value);

<div class ="newInputScore">
    <label for="fixGoal">SET THE GOAL :</label><br>
    <input name = "fixGoal" type = "text" id = "fixGoal">
</div>

<button onclick="console.log(parseInt(document.getElementById('fixGoal').value))">Start</button>

【讨论】：

代码不起作用，因为只要你持有任何价值，你就赢得了比赛。即使你在输入中说“50”，如果你持有任何数字，你就会立即赢得比赛。我认为这与这部分有关：if (scores[activePlayer] >= 100 || scores[activePlayer] >= choosenScore)。无论您在输入中写什么，似乎都将 choosenScore 设置为“0”。

【解决方案2】：

当您尝试使用 javascript 比较运算符比较两个不同类型的变量时，存在类型强制（尝试将变量转换为相同类型） - 在您的情况下，undefined 转换为 NaN 和

...需要注意的是，任何涉及NaN 的比较都会评估为false

查看post 以获得对此的完整解释。最后，false 转换为 +0。

建议：

为什么不为输入设置一个默认值"0"

<div class ="newInputScore">
    <label for="fixGoal">SET THE GOAL :</label><br>
    <input name = "fixGoal" type = "text" id = "fixGoal" value = "0">
</div>

<button onclick="console.log(parseInt(document.getElementById('fixGoal').value))">Start</button>

或者更好的是，使用三元运算符获取choosenScore 的值

function choosenScore() {
    let choosenScore = document.getElementById('fixGoal').value;
    return parseInt(choosenScore ? choosenScore : 0);
}

<div class ="newInputScore">
    <label for="fixGoal">SET THE GOAL :</label><br>
    <input name = "fixGoal" type = "text" id = "fixGoal">
</div>

<button onclick="console.log(choosenScore())">Start</button>

【讨论】：