js to make a simple calculator

This article shares the specific code of making a simple calculator with js for your reference. The specific content is as follows

To make a simple calculator as shown in the picture, you must first create a form and make it look like the one shown in the picture.

<table border="1" cellspacing="0" >
   <tr><th colspan="2">Shopping Calculator</th></tr>
   <tr>
    <td>The first number</td>
       <td><input type="text" id="inputId1" /></td>
   </tr>
   <tr>
    <td>The second number</td>
       <td><input type="text" id="inputId2" /></td>
   </tr>
   <tr>
    <td><button type="button" onclick="cal('+')" >+</button></td>
    <td><button type="button" onclick="cal('-')" >-</button>
    <button type="button" onclick="cal('*')" >*</button>
    <button type="button" onclick="cal('/')" >/</button></td>
   </tr>
   <tr>
    <td>Calculation results</td>
    <td><input type="text" id="resultId"/></td>
   </tr>
</table>

Onclick uses the cal() method. In fact, I used add, sub, mul, and div methods at first. Later, I found that these four methods are the same except for the arithmetic operators. So I chose to use one method. When clicking the button, the arithmetic operator passed to the method is different. The code is as follows:

<script type="text/javascript">
 function cal(type){
  var num1 = document.getElementById('inputId1');
  var num2 = document.getElementById('inputId2');
  var result;
   switch(type){
    case '+':
    result = parseInt(num1.value) + parseInt(num2.value);
    break;
    case '-':
    result = parseInt(num1.value) - parseInt(num2.value);
    break;
    case '*':
    result = parseInt(num1.value) * parseInt(num2.value);
    break;
    case '/':
    result = parseInt(num1.value) / parseInt(num2.value);
    break;
  }
 var resultObj = document.getElementById('resultId');
 resultObj.value = result;
 }
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Implementing a web calculator with native JavaScript
Detailed explanation of the process of realizing calculator function in javascript
JavaScript implements simple calculator function
js version to realize calculator function
Native js to implement a simple calculator
Implementing a simple calculator with javascript
Writing a web calculator using javascript
Write a simple calculator using JavaScript

<<: Summary of MySQL lock knowledge points

>>: Analysis of permissions required to run docker

js to make a simple calculator

Steps to install Pyenv under Deepin

The difference between two MySQL delete user statements (delete user and drop user)

htm beginner notes (must read for beginners)

js implements table drag options

Parse CSS to extract image theme color function (tips)

Example code and method of storing arrays in mysql

Mysql classic high-level/command line operation (quick) (recommended)

Example code for implementing concurrent request control in JavaScript/TypeScript

A Preliminary Study on JSBridge in Javascript

A Deep Understanding of Angle Brackets in Bash (For Beginners)

Recommend

HTML+CSS div solution when relative width and absolute width conflict

Troubleshooting the reasons why MySQL deleted records do not take effect

Bootstrap+Jquery to achieve calendar effect

CSS code to achieve background gradient and automatic full screen

Understanding JavaScript prototype chain

Vue realizes the card flip effect

Modify file permissions (ownership) under Linux

Detailed explanation of the solution to the problem of Ubuntu system interface being too small in vmware14Pro

CSS Sticky Footer Implementation Code

How to create a table by month in MySQL stored procedure

The difference and advantages and disadvantages of Mysql primary key UUID and auto-increment primary key

Summary of ten Linux command aliases that can improve efficiency

Make your website automatically use IE7 compatibility mode when browsing IE8

Solution to mysql error code 1064

JavaScript canvas to achieve raindrop effects