All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Calculation Functions

Last Updated : Mar 11, 2024

JavaScript Calculation Functions

In this tutorial we will show you the solution of JavaScript calculation functions, as we know arithmetic calculation contain addition, subtraction, multiplication and division so here we are going to show example with all calculations using JavaScript.

In external script file we doing all calculations and results are we appends on respective div element id’s ‘add,sub,mul,div’ defined in html block.

Step By Step Guide On JavaScript Calculation Functions :-

Here we defined h3 tag for display heading for this program and four div tags defined with different id’s ‘add,sub,mul,div’ for appending all calculation results on webpage.

Then we imported externally defined script file exter.js in our html page.

In js file we defined two variables ‘value1,value2’ with values ’12,3’ then we doing addition, subtraction, multiplication, division calculations and results are appended on respective div elements ‘add’,’sub’,’mul’,’div’.

<!DOCTYPE html>
<html>
    <head>
        <title>Arithmetic Calculations</title>
    </head>
    <body>
        <h3>Arithmetic Calculations</h3>
        <div id="add">Addition :</div>
        <div id="sub">Subtraction :</div>
        <div id="mul">Multiplication :</div>
        <div id="div">Division :</div>
        <script src="exter.js"></script>
    </body>
</html>

Exter.js

var value1=12;
var value2=3;
document.getElementById('add').innerHTML+=value1+"+"+value2+"="+(value1+value2);
document.getElementById('sub').innerHTML+=value1+"-"+value2+"="+(value1-value2);
document.getElementById('mul').innerHTML+=value1+"*"+value2+"="+(value1*value2);
document.getElementById('div').innerHTML+=value1+"/"+value2+"="+(value1/value2);
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. Here we defined h3 tag for display heading ‘Arithmetic Calculations’ on webpage then we defined four div tags with id’s ‘add’,’sub’,’mul’,’div’ for appends result on webpage and we imported exter.js script file at end.
  7. In script file we defined variables ‘value1,value2’ with values ’12,3’. At div element ‘add’ we appending value1’s value ‘12’ with string ‘+’ symbol with value2’s value ‘3’ then ‘=’ symbol finally addition result added then all are concatenated by + symbol.
  8. At div element ‘sub’ we appending value1’s value ‘12’ with string ‘-’ symbol with value2’s value ‘3’ then ‘=’ symbol finally Subtraction result added then all are concatenated by + symbol.
  9. At div element ‘mul’ we appending value1’s value ‘12’ with string ‘*’ symbol with value2’s value ‘3’ then ‘=’ symbol finally Multiplication result added then all are concatenated by + symbol.
  10. At div element ‘div’ we appending value1’s value ‘12’ with string ‘/’ symbol with value2’s value ‘3’ then ‘=’ symbol finally Division result added then all are concatenated by + symbol.
  11. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to do the arithmetic calculations using javascript.

When we executing this program on browser we can see the four basic arithmetic operations with their results of ’15,9,36,4’ based on we given value on program is displayed on webpage.

If you needs to check with some other value means simply you can modify the variables ‘value1,value2’ is enough respective result we will achieve when we refresh browser.

We can also do some other operations later we will discuss about that in detail.

I hope this tutorial on JavaScript calculation functions helps you and the steps and method mentioned above are easy to follow and implement.