如何成功地操纵从用户输入中获取的数字?(HTML / JavaScript)

How do I successfully manipulate numbers taken from user input? (HTML/JavaScript)

本文关键字：获取 数字 HTML JavaScript 用户 成功 何成功 操纵 输入      更新时间：2023-09-26

我试图创建一个确认框，它将从输入类型="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));
    }   
}

首先， 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()来检查您的输入是否有效

NaN在JavaScript中代表'Not a Number'，这正是你的情况。

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

您也可以直接获取它们的值，number1。值* 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));
    }
}

您需要使用parseFloat解析数字

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

.value表示输入元素的值。

然后需要将这两个定义移动到decisionDemo函数中。并将"你想要乘还是加?"改为"你想要乘吗?"

在您的例子中，您的number变量保存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()">

请检查是否找到该元素。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));
                }
            }
相关文章：