如何将输入标签中的两个数字相加? [英] how to sum two numbers from input tag?

问题描述

可能重复:
如何将两个字符串像数字一样相加?

我写了一个简单的 JavaScript 代码，我想使用两个输入框并从两个值中添加数字.这是代码，我看到的结果是 1520 而不是 35.

I wrote a simple JavaScript code and I want to use two input box and add numbers from the two value. Here's the code, and I see the result 1520 instead of 35.

我该如何解决?

n1 <input type = "number" id = "n1" value=15 />
n2 <input type = "number" id = "n2" value=20 />

<p>Sum?</p>
<button onclick="sum()">Try it</button>
<p id="demo2">Result?? </p>

<script type="text/javascript">
 function sum() 
{ 
    var fn, ln; 
    fn = document.getElementById("n1").value; 
    ln = document.getElementById("n2").value; 
    result =  (fn+ln); 
    document.getElementById("demo2").innerHTML = result; 
}
</script>

推荐答案

使用 parseInt() 或 parseFloat();您遇到的问题是您连接两个字符串，而不是添加两个数字.parseInt()(假设它找到一个实数)通过将字符串转换为数字来解决该问题:

Use parseInt(), or parseFloat(); the problem you were experiencing is that you were concatenating two strings, not adding two numbers. parseInt() (assuming that it finds a real number) addresses that issue by converting the string to a number:

 function sum() 
{ 
    var fn, ln, result; 
    fn = parseInt(document.getElementById("n1").value, 10);
    ln = parseInt(document.getElementById("n2").value, 10);
    result =  (fn+ln); 
    document.getElementById("demo2").innerHTML = result; 
}

出现在value之后的, 10是基数，它确保返回的数字(如果有的话)是哪个基数.

The , 10 that appears after the value is the radix, which ensures which number-base the returned number (if any) will be.

还要注意，result 变量也应该在函数中声明，以避免污染全局范围(并可能在其他地方与其他变量产生问题).

Also note that the result variable should be declared within the function as well, to avoid polluting the global scope (and possibly creating problems with other variables elsewhere).

参考资料:

• parseFloat().
• parseInt().

这篇关于如何将输入标签中的两个数字相加?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！