如何成功地处理从用户输入中获取的数字？（HTML/JavaScript）

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

HTML

---

您需要使用parseFloat解析这些数字

.值表示输入元素的值

然后，您需要在decisionDemo函数中移动这两个定义。和变化，你想乘还是加？你想乘多少

在您的例子中，数字变量保存的是DOM元素，而不是它们的值。因此，您要倍增/添加DOM元素

完整代码重做：

<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()">

---

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

---

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

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

首先，document.getElementByIdnumber1将只返回HTML元素，如果要获取文本框内的值，必须使用document.getElementByIdnumber1.value

其次，放置两条语句，var number1=document。。。和var number2=文档。。。在decisionDemo方法之外，因此，它将只执行一次。您应该将这些语句放在decisionDemo方法中

第三，document.getElementByIdnumber1.value将返回字符串值。因此，如果要执行算术计算，需要将它们解析为一种数字，例如整数或浮点

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));
    }
}

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

---

您可以使用检查输入是否有效

请检查是否找到元素。而且可能有用

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));
                }
            }

---

嗯，不接受基数参数。这是parseInt。@jfriend00噢！我完全忘了！编辑，我没有投反对票。刚刚为您修复了一个拼写错误，不确定出了什么问题。@jfriend00我非常抱歉。我根本不想责怪你。看起来这里正在进行一些连续的否决投票谢谢你的回复，我不知道为什么有人否决了投票，它工作得很好。然后请在写差异之前，先尝试文章中的代码，然后是这个代码。作者并没有从输入中获取价值，而是从多个DOM元素中获取价值。令人惊讶的是，感谢您的深入回复。工作完美。

<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()">

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));
    }
}

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));
    }
}

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));
                }
            }