如何成功操作从用户输入中获取的数字？ (HTML/JavaScript)答案

【问题标题】：How do I successfully manipulate numbers taken from user input? (HTML/JavaScript)如何成功操作从用户输入中获取的数字？ (HTML/JavaScript)
【发布时间】：2014-04-28 10:16:04
【问题描述】：

我正在尝试创建一个确认框，它将从输入 type="number"> 标记中获取两个数字，并使用确认框将它们相乘或相加，但返回的结果是 NaN。我做错了什么？

HTML

<input id="number1" type="number">
<input id="number2" type="number">
<input type="submit" value="Start Process" onclick="decisionDemo()">

JavaScript

var number1 = document.getElementById("number1");
var number2 = document.getElementById("number2");

function decisionDemo(){
    if(confirm("Would you like to multiply or add?")){
        alert("You multiplied for the result of "+ number1*number2);
    }
    else{
        alert("You added for the result of "+ (number1+number2));
    }   
}

【问题讨论】：

标签： javascript html input nan

【解决方案1】：

你需要使用parseFloat解析数字

var number1 = parseFloat(document.getElementById("number1").value),
    number2 = parseFloat(document.getElementById("number2").value);

.value 表示输入元素的值。

然后您需要将这两个定义移动到您的decisionDemo 函数中。并改变，“你想乘还是加？”改为“你想倍增吗？”。

在您的情况下，您的 number 变量保存的是 DOM 元素，而不是它们的值。因此，您正在增加/添加 DOM 元素。

DEMO

重做完整代码：

<script>

function decisionDemo(){
    var number1 = parseFloat(document.getElementById("number1").value),
    number2 = parseFloat(document.getElementById("number2").value);

    if(confirm("Would you like to multiply?")){
        alert("You multiplied for the result of "+ (number1*number2));
    }
    else{
        alert("You added for the result of "+ (number1+number2));
    }   
}
</script>

<input id="number1" type="number">
<input id="number2" type="number">
<input type="submit" value="Start Process" onclick="decisionDemo()">

【讨论】：

嗯，parseFloat() 不接受基数参数。那是parseInt()。
@jfriend00 哎呀！我完全忘了！已编辑。
我没有投反对票。刚刚为您修正了一个错字，不知道是什么问题。
@jfriend00 非常抱歉。我根本没有打算责怪你。看起来这里正在进行一些连续投票
感谢您的回复，我不知道为什么有人投了反对票，效果很好。

【解决方案2】：

JavaScript 中的 NaN 代表“非数字”，这正是您的情况。

变量包含 2 个 DOM 对象，而不是 2 个数字，您需要在执行任何算术运算之前将它们转换为数字。

【讨论】：

【解决方案3】：

您也可以获取它们的价值，number1.value* number2.value

var number1 = document.getElementById("number1");
var number2 = document.getElementById("number2");

function decisionDemo(){
    if(confirm("Would you like to multiply or add?")){
        alert("You multiplied for the result of "+ (number1.value* number2.value));
    }
    else{
        alert("You added for the result of "+ (number1.value+number2.value));
    }
}

【讨论】：

那么在写差异之前，请尝试帖子中的代码，然后是这段代码。作者没有从输入中获取价值，它们是多个 DOM 元素，而不是它们的价值。

【解决方案4】：

首先，document.getElementById("number1") 将只返回 HTML 元素，如果要获取文本框中的值，则必须使用 document.getElementById("number1").value ...

第二，将var number1 = document. ... 和var number2 = document. ... 这两条语句放在decisionDemo() 方法之外，这样它只会执行一次。您应该将这些语句放在 decisionDemo() 方法中。

第三，document.getElementById("number1").value 将返回string 值。因此，如果要进行算术计算，则需要将它们解析为某种数字，例如 Integer 或 Float。

function decisionDemo(){
    var number1 = document.getElementById("number1").value;
    var number2 = document.getElementById("number2").value;
    number1 = parseFloat(number1);
    number2 = parseFloat(number2);
    if(confirm("Would you like to multiply or add?")){
        alert("You multiplied for the result of "+ number1*number2);
    }
    else{
        alert("You added for the result of "+ (number1+number2));
    }
}

当用户输入无效数字时，您可能会在结果中遇到NaN。

您可以使用isNaN() 来检查您的输入是否有效

【讨论】：

太棒了，感谢您的深入回复。完美运行。

【解决方案5】：

请检查是否找到该元素。 IsNaN() 和 IsFinite() 可能有用。

function decisionDemo() {

                var number1 = 0;
                var number2 = 0;

                if (document.getElementById("number1") != null && isFinite(document.getElementById("number1").value)) {
                    number1 = parseFloat(document.getElementById("number1").value);
                }

                if (document.getElementById("number2") != null && isFinite(document.getElementById("number2").value)) {
                    number2 = parseFloat(document.getElementById("number2").value);
                }

                if (confirm("Would you like to multiply or add?")) {
                    alert("You multiplied for the result of " + number1 * number2);
                } else {
                    alert("You added for the result of " + (number1 + number2));
                }
            }

【讨论】：