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

Question

我正在尝试创建一个确认框，该确认框将从输入 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));
    }   
}

Answer 1

首先，如果您想获取文本框中的值，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()检查您的输入是否有效