Tuesday, December 25, 2012

Add two numbers

Adding Two numbers

This post focuses on adding two numbers, adding two numbers does not mean static value but dynamic inputs with a simple number validation. Below is the step by step procedure.

Create a index.html and place the below code in the body section of the HTML file. 

<!DOCTYPE HTML>
<head>
<title>Add two numbers</title>
<script type="text/javascript" src="script.js" >
</head>
<body>
Enter the first number: <input type="text" id="txt1" /><br />
Enter the seccond number: <input type="text" id="txt2" /><br />
<input type="button" onclick="call()" value="Add"/>
</body>
</html>

Create a javascript file(script.js) with the below content.

function call(){
var q=parseInt(document.getElementById("txt1").value);
var w=parseInt(document.getElementById("txt2").value);
var result=q+w;
   if(isNaN(q)||isNaN(w)){
          alert("please enter a number");
     }
     else
        {
         var result=q+w;
         alert("The sum is " +result);
       }
}

Please do not forget to include the javascript file(script.js) in the index.html.
In this example you would have observed the following javascript terms.
  • onclick
  • document.getElementById
  • parseInt
  • isNaN


1. onclick-In the above example onclick it calls the function call();
2. document.getElementById -gets the values entered in the input fields which defined with id's txt1 and txt2.
3.parseInt - converts the value to Int type.
4.isNaN - checks if the value is NaN.

Couple of things to be noted
  1. document.getElementById always returns a string value, so we need to convert the value to Int(parseInt) for mathematical operations.
  2. In order to ensure that the entered inputs are only numbers , a if condition is implemented to check the values. If the entered value is not a number then it would alert with(please enter a number).
Thorough this example we can add dynamic inputs and validate.

Hope this post was informative, would be adding some more post shortly.



Informative Javascript

6 comments:


  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me..I am a regular follower of your blog.
    Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from HTML5 CSS3 Javascript Online Training from India .
    or learn thru HTML5 CSS3 Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. HTML5 CSS3 Javascript Online Training from India

    ReplyDelete
  2. I appreciate your efforts because it conveys the message of what you are trying to say. It's a great skill to make even the person who doesn't know about the subject could able to understand the subject . Your blogs are understandable and also elaborately described. I hope to read more and more interesting articles from your blog. All the best.

    rpa training in bangalore
    best rpa training in bangalore
    RPA training in bangalore
    rpa course in bangalore
    rpa training in chennai
    rpa online training

    ReplyDelete
  3. I really like the dear information you offer in your articles. I’m able to bookmark your site and show the kids check out up here generally. Im fairly positive theyre likely to be informed a great deal of new stuff here than anyone
    python Course in Pune
    python Course institute in Chennai
    python Training institute in Bangalore

    ReplyDelete
  4. Whoa! I’m enjoying the template/theme of this website. It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between superb usability and visual appeal. I must say you’ve done a very good job with this.

    AWS Training in Bangalore | Best AWS Amazon Web Services…
    Amazon Web Services (AWS) Training in Pune India
    AWS Training | AWS Training and Certification | AWS online training
    AWS Training in Bangalore cost| Aws training in Bangalore with placements

    ReplyDelete
  5. Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.
    AWS Training in pune
    AWS Online Training
    AWS Training in Bangalore

    ReplyDelete