Simple Calculator Function Example Implemented with JavaScript

This article instance tells about the ultra-simple calculator function implemented by JavaScript. Shared for everyone's reference, as follows:

Let's first take a look at the running effect:

Specific code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.oldtoolbag.com JS calculator</title>
  <script type="text/javascript">
   // window.onload to get elements getElementById
    window.onload = function(){
      var oTxt1 = document.getElementById('val01);
      var oTxt2 = document.getElementById('val02);
      var oFuhao = document.getElementById('fuhao');
      // These three need to be placed inside the button function because s1.value is to get the input from the input, but at this time there is no input
      // var iNum1 = oTxt1.value;
      // var iNum2 = oTxt2.value;
      // var iNum3 = oFuhao.value;
      oBtn = document.getElementById('btn');
　　　　　　　// Calculate button click event
      oBtn.onclick = function(){
        var iNum1 = oTxt1.value;
        var iNum2 = oTxt2.value;
        var iNum3 = oFuhao.value;
        var iResult;
　　　　　　　　　　//If one of the two inputs is empty　　　　　　　　　　//return is used to end the execution inside the if
        if (iNum1=='' || iNum2=='') {
          alert('Cannot be empty');
          return;
        }　　　　　　　　　　//isNaN() If it is true, it means it is not a number, so if there is a non-numeric input among the two inputs, an alert is prompted
        if (isNaN(iNum1) || isNaN(iNum2)) {
          alert('Cannot contain letters');
          return;
        }　　　　　　　　　　//For+-*/Four operations corresponding to the value are judged　　　　　　　　　　//If iNum is used directly1+iNum2 The output result is a concatenation of strings 12+24 1224 Therefore, it needs to be converted to an integer using parseInt
        if (iNum3 == 0) {
          iResult = parseInt(iNum1) + parseInt(iNum)2)
        }
        else if (iNum3 == 1) {
          iResult = parseInt(iNum1) - parseInt(iNum)2)
        }
        else if (iNum3 == 2) {
          iResult = parseInt(iNum1) * parseInt(iNum)2)
        }
        else if (iNum3 == 3) {
          iResult = parseInt(iNum1)/parseInt(iNum)2)
        }
        alert(iResult);
      }
    }
  </script>
</head>
<body>
  <h3>Calculator</h3>
  <input type="text" id="val01">
  <select id="fuhao">
    <option value="0">+</option>
    <option value="1">-</option>
    <option value="2">*</option>
    <option value="3">/</option>
  </select>
  <input type="text" id="val02">
  <input type="button" id="btn" value="Calculate">
</body>
</html>

PS: Here are several calculation tools recommended for further reference and reference:

Online One-Variable Function(Equation) Solving Calculation Tool:
http://tools.jb51.net/jisuanqi/equ_jisuanqi

Online Scientific Calculator_Online Advanced Calculator Calculation:
http://tools.jb51.net/jisuanqi/jsqkexue

Online Calculator_Standard Calculator:
http://tools.jb51.net/jisuanqi/jsq

Readers who are interested in more about JavaScript-related content can check the special topics of this website: 'Summary of JavaScript Mathematical Operation Usage', 'Summary of JavaScript Data Structure and Algorithm Skills', 'Summary of JavaScript Array Operation Skills', 'Comprehensive Summary of JavaScript Event Operations and Skills', 'Summary of JavaScript DOM Operation Skills', and 'Summary of JavaScript Character and String Operation Skills'.

I hope the content described in this article will be helpful to everyone in JavaScript program design.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report violations by replacing # with @ in the email and providing relevant evidence. Once verified, the website will immediately delete the infringing content.

Basic Tutorial