js to make a simple calculator

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

Recommend

Quickly solve the problem that the mysql57 service suddenly disappeared

one, G:\MySQL\MySQL Server 5.7\bin> mysqld --i...

A Brief Analysis of CSS Selector Grouping

Selector Grouping Suppose you want both the h2 el...

Sample code using scss in uni-app

Pitfalls encountered I spent the whole afternoon ...

How to install PostgreSQL and PostGIS using yum on CentOS7

1. Update the yum source The PostgreSQL version o...

Summarize the common application problems of XHTML code

Over a period of time, I found that many people d...

The visual design path of the website should conform to user habits

Cooper talked about the user's visual path, w...

Introduction to the role of HTML doctype

Document mode has the following two functions: 1. ...

Centos7.5 installs mysql5.7.24 binary package deployment

1. Environmental preparation: Operating system: C...

Detailed explanation of MySQL database transaction isolation levels

Database transaction isolation level There are 4 ...

MySQL 5.7.10 Installation Documentation Tutorial

1. Install dependency packages yum -y install gcc...

GZIP compression Tomcat and improve web performance process diagram

1. Introduction I recently worked on a project an...

How to maintain MySQL indexes and data tables

Table of contents Find and fix table conflicts Up...

Detailed explanation of Alibaba Cloud security rule configuration

Two days ago, I took advantage of the Double 11 s...