Of Stack

JavaScript Implementation of Simple Mathematical Operation Function Based on DOM Operation

  • 2021-07-10 18:55:28
  • OfStack

In this paper, an example is given to describe the simple mathematical operation function of JavaScript based on DOM operation. Share it for your reference, as follows: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
  <title> Simple DOM Operation - Implement simple operations </title>
  <script type="text/javascript" language="javascript">
    window.onload = function () {
      //alert("window.onload!!!");
      var opNum1 = window.document.getElementById("opNum1");
      var opNum2 = window.document.getElementById("opNum2");
      //var op = window.document.getElementById("op");
      var btnElements = window.document.getElementsByName("operater"); //.getElementsByTagName("input[type=button]");
      var btnElementsLength = btnElements.length;
      for (var i = 0; i < btnElementsLength; i++) {
        //alert(i);
        btnElements[i].onclick = function () {
          //alert(opNum1.value + "_" + opNum2.value + "_" + this.value);
          operate(opNum1.value, opNum2.value, this.value);
        }
      }
    }
    function operate(opNum1, opNum2, op) {
      var result=null;
      switch (op) {
        case "+": result = parseFloat(opNum1) + parseFloat(opNum2);
          break;
        case "-": result = parseFloat(opNum1) - parseFloat(opNum2);
          break;
        case "*": result = parseFloat(opNum1) * parseFloat(opNum2);
          break;
        case "/": result = parseFloat(opNum1) / parseFloat(opNum2);
          break;
        case "%": result = parseFloat(opNum1) % parseFloat(opNum2);
          break;
        default:
          break;
      }
      var resultElement = window.document.getElementById("resultSpan");
      resultElement.innerHTML = result;
    }
  </script>
  <style type="text/css">
    body{ line-height:30px;
       font-size:20px;
    }
    input[type=button]{ width:50px;
    }
  </style>
</head>
<body>
   Operand 1 : <input type="text" id="opNum1" /><br />
   Operand 2 : <input type="text" id="opNum2" /><br />
   Select operator: 
  <input type="button" name="operater" value="+" />
  <input type="button" name="operater" value="-" />
  <input type="button" name="operater" value="*" />
  <input type="button" name="operater" value="/" />
  <input type="button" name="operater" value="%" />
  <br />
   The result of the operation is: <span id="resultSpan"></span><br />
</body>
</html>

PS: Here are some computing tools recommended for your reference in the next step:

On-line 1 yuan function (equation) solution calculation tool;
http://tools.ofstack.com/jisuanqi/equ_jisuanqi

Scientific calculator online _ advanced calculator online calculation:
http://tools.ofstack.com/jisuanqi/jsqkexue

Online Calculator _ Standard Calculator:
http://tools.ofstack.com/jisuanqi/jsq

For more readers interested in JavaScript related contents, please check the topics on this site: "Summary of JavaScript Operation DOM Skills", "Summary of JavaScript Replacement Skills", "Summary of javascript Coding Skills", "Summary of json Operation Skills in JavaScript", "Summary of JavaScript Search Algorithm Skills", "Summary of JavaScript Error and Debugging Skills", "Summary of JavaScript Data Structure and Algorithm Skills", "Summary of JavaScript Traversal Algorithm and Skills" and "Summary of JavaScript Mathematical Operation Usage"

I hope this article is helpful to everyone's JavaScript programming.

Related articles: