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

Vue realizes the card flip effect

This article example shares the specific code of ...

MySQL installation tutorial under Centos7

MySQL installation tutorial, for your reference, ...

Navicat for MySQL 15 Registration and Activation Detailed Tutorial

1. Download Navicat for MySQL 15 https://www.navi...

Oracle deployment tutorial in Linux environment

1. Environment and related software Virtual Machi...

Book page turning effects made with CSS3

Result:Implementation code: html <!-- Please h...

10 Popular Windows Apps That Are Also Available on Linux

According to data analysis company Net Market Sha...

Ideas and codes for realizing magnifying glass effect in js

This article example shares the specific code of ...

Tutorial on resetting the root password of Mac MySQL

Disclaimer: This password reset method can direct...

HTML simple web form creation example introduction

<input> is used to collect user information ...

Getting Started with CSS3 Animation in 10 Minutes

Introduction Animation allows you to easily imple...

MySQL example of getting today and yesterday's 0:00 timestamp

As shown below: Yesterday: UNIX_TIMESTAMP(CAST(SY...

Detailed explanation of MySQL table name case-insensitive configuration method

By default, MySQL in Linux distinguishes between ...

Usage instructions for the docker create command

The docker create command can create a container ...

Detailed explanation of MySQL startup options and system variables examples

Table of contents Boot Options Command Line Long ...