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:
|
<<: Summary of MySQL lock knowledge points
>>: Analysis of permissions required to run docker
This article example shares the specific code of ...
This article is a MySQL configuration file soluti...
MySQL installation tutorial, for your reference, ...
1. Download Navicat for MySQL 15 https://www.navi...
1. Environment and related software Virtual Machi...
Result:Implementation code: html <!-- Please h...
According to data analysis company Net Market Sha...
This article example shares the specific code of ...
Disclaimer: This password reset method can direct...
<input> is used to collect user information ...
Introduction Animation allows you to easily imple...
As shown below: Yesterday: UNIX_TIMESTAMP(CAST(SY...
By default, MySQL in Linux distinguishes between ...
The docker create command can create a container ...
Table of contents Boot Options Command Line Long ...