How do I make document.getElementById('id').value return a number not a string in Javascript
Question
I am making a form for users to input number and then trying to display the sum. But the document.getElementById('someid').value is returning a string. And hence my add function is concatenating the strings instead of adding them as number. How do I solve it. Sorry for such a basic question.
//Script
function add(){
var a = document.getElementById('num1').value;
var b = document.getElementById('num2').value;
return a + b;
}
console.log(add());
//HTML
<p> Input 2 numbers to add</p>
<input type="number" id="num1"/>
<input type="number" id="num2"/>
<input type="submit" value="Add" onclick="add()">
6 answers
solution1
4 2016-06-05 10:29:16
Try to use parseInt . This function returns number
solution2
3 2016-06-05 11:25:22
You have three options.
- parseInt
please please add the base 10 parsing to it, since you save the engine from trying to guess which base it should parse the integer to.
return parseInt(a, 10) + parseInt(b, 10);
- Coercion
the method i prefer is coercing String type to number type by simply wrapping the string in a number constructor
return Number(a) + Number(b);
3.unary plus
unary plus is the fastest and preferred way of converting something into a number. but Number(a) is much more readable in my opinion.
return +a + +b
Note: do not copy bad code from people parsing integers without giving it a base for parsing.
solution3
1 2016-06-05 10:35:35
var a = parseInt(document.getElementById('num1').value);
solution4
1 2016-06-05 10:36:59
You should prepend it with + since they are strings and not numbers .
Try this:
function add(){
var a = document.getElementById('num1').value;
var b = document.getElementById('num2').value;
var x = +a + +b;
return x;
}
or, simply:
var a = parseInt(document.getElementById('num1').value);
var b = parseInt(document.getElementById('num2').value);
var x = a + b;
Modify your code instead:
<html>
<body>
<p>Input 2 numbers to add</p>
<input type="number" id="num1"/>
<input type="number" id="num2"/>
<input type="submit" value="Add" onclick="add()">
<p id="result"></p>
<script>
function add(){
var a = document.getElementById('num1').value;
var b = document.getElementById('num2').value;
var x = +a + +b;
document.getElementById("result").innerHTML = x;
}
</script>
</body>
</html>
solution5
1 2016-06-05 15:43:54
You have to tell javascript that you want to work with numbers instead of strings. So instead of
function add(){
var a = document.getElementById('num1').value;
var b = document.getElementById('num2').value;
return a + b;
}
you can use
function add(){
var a = document.getElementById('num1').value + 0;
var b = document.getElementById('num2').value + 0;
return a + b;
}
or
function add(){
var a = parseInt(document.getElementById('num1').value);
var b = parseInt(document.getElementById('num2').value);
return a + b;
}
solution6
0 2021-03-06 17:06:26
parseInt(document.getElementById("id").value)对于整数parseFloat(document.getElementById("id").value)对于浮点数所以小数
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.