Simple calculator using Javascript

The basic idea behind this tutorial is to use javascript to get a simple calculator which will take inputs from user like the two numbers and the operation that the user intends to perform and show the result.

Here, I have used a nested loop to show how they work. That is the reason this program will be actually difference rather than subtraction. Meaning, it will never give you a negative number. It will automatically subtract the smaller number from the larger number. And the same holds true for division. But if you understand the program, you can easily tweak the nested loop to get that thing solved. After all, you also need to work on something.

Ok. Lets start with the HTML code for the page. I have not included the javascript file instead of using it on the page. It is a good practice to keep all scripts in one file and then include them instead of having them on the HTML page.

The html file is here

Not able to embed the html code here, so its better to have the page physically uploaded and then sending a link. Anyways, check the link and you will get the HTMl code for the page.

Now we will look at the javascript and understand what is happening there.

// this function will take two numbers, an operator and then multiply the numbers as per the selected operator and return the result.
function doCalculation (input1, input2, operator){
//handling addition
if (operator == "Addition") {
return input1 + input2;
}
//handling multiplication
if (operator == "Multiply") {
return input1 * input2;
}
//handling division
if (operator == "Division") {
if (input1 > input2){
return input1 / input2;
}
else {
return input2 / input1;
}
}


//handling subtraction
if (operator == "Subtraction") {
if (input1 > input2){
return input1 - input2;
}
else {
return input2 - input1;
}
}


}

// this function takes the values from the form and shows the result as an alert and also in the text box.
function doSimpleCalc() {
number1 = parseFloat(document.calculator.number1.value);
number2 = parseFloat(document.calculator.number2.value);
//result = number1 + number2;
selectedOption = document.calculator.operator.value;
//alert (selectedOption);
result = doCalculation(number1, number2, selectedOption);


alert (result);
document.calculator.result_text.value = result;
}

Note:
If you see there are two functions in the java script. I could have done the whole thing using one function, but then the function would have been form dependent. Meaning, if my function is calculating and also displaying the result then it is interacting with the HTML of the page, which means it knows about the page and depends on them. If we change something on the page later on, our script might need to change. And also, we may have to write same code for different pages. So, its best to make on function which will do the main function. Here the main function is doCalculation. It takes the two numbers and the operator and will return the result. This way I can use this function where ever I want to and I know it will work without any problem. Try to make the functions as less complicated as possible so that you can use them anywhere.

Ok, so the doCalculation function is simple to understand. It takes three parameters input1, input2 and operator. The first two are the numbers which we will get from the user through the text box. And the third one is the operator which the operator will select from the drop down select option.