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 bees 23 and not 5. please suggest what to do, except using type = number in the input boxes.

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 bees 23 and not 5. please suggest what to do, except using type = number in the input boxes.

• javascript
• html

• possible duplicate of Javascript to convert string to number? – Felix Kling Commented Feb 14, 2012 at 16:11

5 Answers 5

You can use parseInt(...)

Example:

var num = parseInt("2", 10) + parseInt("3", 10);
// num == 5

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./jsref/jsref_parseint.asp) or parseFloat (http://www.w3schools./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.

Number() is the function you want "123a" returns NAN

parseInt() truncates trailing letters "123a" returns 123

<input type="text" id="txtFld" onblur="if(!Number(this.value)){alert('not a number');}" />

• jsfiddle

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>