I need to add up two numbers input by the user. To do that, I create two input fields, retrieve values from them , using .val(), in two separate variables and then add them. The problem is that the strings are added and not the numbers. For eg. 2 + 3 becomes 23 and not 5. please suggest what to do, except using type = number in the input boxes.
1
-
possible duplicate of Javascript to convert string to number?Felix Kling– Felix Kling2012-02-14 16:11:30 +00:00Commented Feb 14, 2012 at 16:11
Add a comment
|
5 Answers
You can use parseInt(...)
Example:
var num = parseInt("2", 10) + parseInt("3", 10);
// num == 5
1 Comment
nnnnnn
What if the user enters
2.5? Even if you assume that only integers are allowed, please don't suggest parseInt() without using the second parameter to specify base 10 with parseInt("2",10), because otherwise if the user enters a leading zero (e.g., "077") it may (depending on the browser) be treated as octal; if the user enters a leading "0x" it'll be treated as hexadecimal.Use parseInt to convert a string into a number:
var a = '2';
var b = '3';
var sum = parseInt(a,10) + parseInt(b,10);
console.log(sum); /* 5 */
Keep in mind that parseInt(str, rad) will only work if str actually contains a number of base rad, so if you want to allow other bases you'll need to check them manually. Also note that you'll need to use parseFloat if you want more than integers.
Either use parseInt (http://www.w3schools.com/jsref/jsref_parseint.asp) or parseFloat (http://www.w3schools.com/jsref/jsref_parsefloat.asp) to convert to a numerical value before adding.
PS: This is the simple answer. You might want to do some validation/stripping/trimming etc.
Comments
It's a bit easier today. If you have an input[type=number] you can simply do input.valueAsNumber.
This will not work for every input-type though. It will work for input[type=date] but then you could do input.valueAsDate.
Array.from(document.querySelectorAll('input')).forEach(input=>{
input.addEventListener('input', e=>showInputValue(e.currentTarget))
showInputValue(input)
})
function showInputValue(input) {
input.nextSibling.textContent = ` // input.valueAsNumber -> ${input.valueAsNumber}`
}body {
font-family: monospace;
}
label {
width: 100%;
display: flex;
}
span:first-child, input {
width: 6rem;
flex: 0 0 6rem;
}
span:last-child {
flex: 1 0 16rem;
padding-left: 1rem;
}<label><span>text: </span><input type="text" value="123"><span></span></label>
<label><span>number: </span><input type="number" value="123"><span></span></label>
<label><span>range: </span><input type="range" value="123"><span></span></label>
<label><span>date: </span><input type="date" value="2022-07-06"><span></span></label>