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;
}
function addition(){
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="ADD" onclick="javascript:addition();">
<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>
<head>
<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>
</head>
<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