Question

我试图在Java脚本中添加两个文本框字段值。以下是我的代码

<!DOCTYPE html>
<html>
<head>
<script>
function addFunction() {
    var x = document.getElementById("firstInput").value;
    var y = document.getElementById("secondInput").value;
    var sum=x+y;
    alert('Sum is:'+sum);
}
</script>
</head>
<body>

<input type="text" id="firstInput"><br/>
<input type="text" id="secondInput"><br/>

<input type="button" value="Add" onclick="addFunction()">

</body>
</html>

我期待结果将是两个字段值的总和，但事实并非如此我在第一个文本字段中输入了2，在第二个文本字段中输入了3个

Sum is:23

然后仅用于测试我在addFunction（）

中添加了以下代码

var a = 0.0343;
var b = 0.11;
var x = a + b;
alert(x);

输出

0.144299999999999998

发生了什么。有人可以解释一下为什么我会得到这两个奇特的输出吗？

Answer 1

DependencyObjects个FrameworkElements元素是字符串。 value

要获得预期的输出，您可以这样做：

input

关于第二个问题，您可以在此处阅读更多内容：How to deal with floating point number precision in JavaScript?

Answer 2

从输入字段返回的值是字符串。当你添加两个字符串时，它们会追加。所以“2”+“3”是字符串“23”。

您可以使用parseInt将字符串转换为整数。如：

var sum = parseInt(x) + parseInt(y);

Answer 3

您必须使用parseInt()来获得准确的输出

<!DOCTYPE html>
<html>
<head>
<script>
function addFunction() {
    var x = parseInt(document.getElementById("firstInput").value);
    var y = parseInt(document.getElementById("secondInput").value);
    var sum=x+y;
    alert('Sum is:'+sum);
}
</script>
</head>
<body>

<input type="text" id="firstInput"><br/>
<input type="text" id="secondInput" onchange="myFunction()"><br/>

<input type="button" value="Add" onclick="addFunction()">

</body>
</html>

Answer 4

这种情况正在发生，因为它将输入值作为字符而不是实际数字。在第二个示例中设置变量a和b时，您将它们设置为数值。如果您想要数字值，请将添加功能更改为

function addFunction() {
    var x = parseInt(document.getElementById("firstInput").value);
    var y = parseInt(document.getElementById("secondInput").value);
    var sum=x+y;
    alert('Sum is:'+sum);
}

在那里你将所有文本值转换为int然后在函数中添加

Answer 5

<强>铸字

输入和textareas包含字符串值。这就是为什么你的总和并排掩盖价值的原因。这就是字符串连接的工作原理。

'foo' + 'bar' //foobar
'1' + '2' //12
1 + 2 //3

您需要将它们编号为数字才能使其正常工作。您可以使用Number或parseInt执行此操作。 Number仅查找数值并运行得更快。 parseInt is slower但它可以删除字符值并转换为十六进制。

Number('1') + Number('2') //3

处理浮动

针对您的追踪号码问题。

 0.0343 + 0.11 //0.144299999999999998

这是因为浮点数使用分数排序。像2 / 3rds这样的分数不能很好地转换成十进制形式。您可以阅读详细的解释here。无论如何，使用toFixed正确格式化。

Math.PI //3.141592653589793
Math.PI.toFixed(2) //3.14

添加两个输入框值的Javascript意外结果

5 个答案: