Skip to content

JavaScript program to perform arithmetic operations using button | Code

  • by

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:

JavaScript program to perform arithmetic operations using button

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

Tags:

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading