JAVASCRIPT-How to convert string to number?

We are going to learn how we can convert a string to number in javascript. Javascript is a language which is used while making webpages. While html handles the design, it helps us to make our webpage intelligent. We can put a lot of checks, calculations, strings in a smart way. We can also save the traffic to our server and do the calculations locally.

Javascript is oxygen to every webpage. Hardly, there would be any page where javascript is not used.

Many times this situation comes while programming any webpage when we need to convert a string to a number. The other day when I was writing another post “How to convert feet into centimeter” (https://gyankosh.net/index.php/2019/10/07/feet-to-centimeter/) I was trying to design a calculator and forgot this particular function and had to search a lot before I could make it. So thought about writing a small post regarding the same. So lets start.

The function is parseInt(string,radix)

Example:

We’ll take two examples. One without parsing and one after parsing the string into integer.

  1. If we don’t use the formula

scenario:

We have a text field and a button.

We’ll put some number in textfield and press the button. We should get the output as that number +4.

CODE:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Wed, 09 Oct 2019 17:58:22 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>Gyankosh Javascript test</title>
    				
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
<input type="text" id="textField"><br />
					<button name="button1" onClick=doYourJob();>Press Me</button>
					<script type=text/javascript>
					
					function doYourJob(){
							 var string=document.getElementById("textField").value;/* Still lthe value is in the string form*/
							 var b     =4;
							 var c     =string+b;
							 alert(c);
					}
								
					</script>
					
  </body>
</html>

output:

We put 12 in the text field and pressed the button
We expected 16 but got the answer as 124. Why??
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Wed, 09 Oct 2019 17:58:22 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>Gyankosh Javascript test</title>
    				
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
<input type="text" id="textField"><br />
					<button name="button1" onClick=doYourJob();>Press Me</button>
					<script type=text/javascript>
					
					function doYourJob(){
							 var string=document.getElementById("textField").value;/* Still lthe value is in the string form*/
							 string=parseInt(string,10);
							 var b     =4;
							 var c     =string+b;
							 alert(c);
					}
								
					</script>
					
  </body>
</html>