Blog

Simple calculator function in HTML and JavaScript

 



<html>

  <head>

    <script>

      function calculate() {

        var num1 = parseFloat(document.getElementById("num1").value);

        var num2 = parseFloat(document.getElementById("num2").value);

        var operator = document.getElementById("operator").value;

        var result;


        switch (operator) {

          case "+":

            result = num1 + num2;

            break;

          case "-":

            result = num1 - num2;

            break;

          case "*":

            result = num1 * num2;

            break;

          case "/":

            result = num1 / num2;

            break;

          default:

            result = "Invalid operator.";

        }


        document.getElementById("result").value = result;

      }

    </script>

  </head>

  <body>

    <input type="text" id="num1">

    <select id="operator">

      <option value="+">+</option>

      <option value="-">-</option>

      <option value="*">*</option>

      <option value="/">/</option>

    </select>

    <input type="text" id="num2">

    <input type="button" value="Calculate" onclick="calculate()">

    <input type="text" id="result" disabled>

  </body>

</html>