# JavaScript program to perform arithmetic operations using button | Code

You can use multiple functions associated with every arithmetic operation to perform arithmetic operations using buttons in JavaScript.

Or use a switch statement for it, read below tutorial:-

## Perform arithmetic operations using buttons in JavaScript

Simple example code that performs basic arithmetic operations like Addition, Subtraction, Division, Multiplication, and Modulus.

``````<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function multiply(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a*b;
document.my_cal.total.value=c;
}

a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a+b;
document.my_cal.total.value=c;
}

function subtraction(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a-b;
document.my_cal.total.value=c;
}

function division(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a/b;
document.my_cal.total.value=c;
}

function modulus(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a%b;
document.my_cal.total.value=c;
}
</script>

<!-- Opening a HTML Form. -->
<form name="my_cal">

<!-- Here user will enter 1st number. -->
Number 1: <input type="text" name="first">

<!-- Here user will enter 2nd number. -->
Number 2: <input type="text" name="second">

<br><br>

<input type="button" value="SUB" onclick="javascript:subtraction();">
<input type="button" value="MUL" onclick="javascript:multiply();">
<input type="button" value="DIV" onclick="javascript:division();">
<input type="button" value="MOD" onclick="javascript:modulus();">

<br><br>

<!-- Here result will be displayed. -->
Get Result: <input type="text" name="total">

</body>
</html>

``````

Output:

Another example

Take user input, Use function Calc() for calculations, and then print it.

``````<!DOCTYPE html>
<html>
<title>Javscript Calculate</title>
<meta charset="windows-1252">\

<script>
function calc()
{
var n1 = parseFloat(document.getElementById('n1').value);
var n2 = parseFloat(document.getElementById('n2').value);
var oper = document.getElementById('operators').value;

if (oper === '+')
{
document.getElementById('result').value=n1+n2;
}
if (oper === '-')
{
document.getElementById('result').value=n1-n2;
}
if (oper === '/')
{
document.getElementById('result').value=n1/n2;
}
if (oper === '*')
{
document.getElementById('result').value=n1*n2;
}
}
</script>
<body>
<input type="text" id="n1"/><br/><br/>
<input type="text" id="n2"/><br/><br/>

<select id="operators">
<option value="+">+</option>
<option value="-">-</option>
<option value="/">/</option>
<option value="*">*</option>
</select>

<button onclick="calc();">=</button>
<input type="text" id="result"/>
</body>
</html>``````

Do comment if you have any doubts or suggestions on this JS arithmetic code.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Tags:

This site uses Akismet to reduce spam. Learn how your comment data is processed.