Enter two numbers in html to realize addition, subtraction, multiplication and division functions

1. parseFloat() function Make a simple calculator on a web page, enter two numbers in the text box, and be able to add, subtract, multiply and divide the two numbers. The parseFloat() function parses a string and returns a floating point number. This function specifies whether the first character in a string is a number. If it is, the string is parsed until the end of the number is reached and the number is returned as a number. instead of as a string. Syntax: parseFloat(string); 2. JavaScript global properties

1. parseFloat() function

Make a simple calculator on a web page, enter two numbers in the text box, and be able to add, subtract, multiply and divide the two numbers.
The parseFloat() function parses a string and returns a floating point number.
This function specifies whether the first character in a string is a number. If it is, the string is parsed until the end of the number is reached and the number is returned as a number.
instead of as a string.
Syntax: parseFloat(string);

2. JavaScript global properties

property	describe
Infinity	A value representing positive infinity.
NaN	Indicates whether a value is a numeric value.
undefined	Indicates an undefined value.

3. Complete code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript">
       function cal(){
           var nums = document.getElementsByName("num");
           var sz = document.getElementsByName("js");
           var result = document.getElementsByName("rs");
           var n1 = parseFloat(nums[0].value);
           var n2 = parseFloat(nums[1].value);
           /*parseFloat() function parses a string and returns a floating point number.
           This function specifies whether the first character in a string is a number. If it is, the string is parsed until the end of the number is reached and the number is returned as a number.
           instead of as a string.
        */
            switch(sz[0].value){
            case "add" : 
            result[0].value = n1 + n2;
            break;
            case "min" : 
            result[0].value = n1 - n2;
            break;
            case "mul" : 
            result[0].value = n1 * n2;
            break;
            case "div" : 
            result[0].value = n1/n2; 
            break;
              }
          }
      </script>
</head>
<body>
    <div align="center">
        <input type="text" name="num" value="" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" />
        <select name="js" size="1">
            <option value="add">+</option>
            <option value="min">-</option>
            <option value="mul">*</option>
            <option value="div">/</option>
        </select>
   <input type="text" name="num" value=""onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" />
  =
   <input type="text" name="rs" value=""/><br>
   <button id="btn"onclick="cal()">Calculate</button>
</div>
</body>
</html>

Effect display:

insert image description here

This is the end of this article about how to add, subtract, multiply and divide two numbers by inputting them in html. For more relevant html addition, subtraction, multiplication and division content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: Why is there this in JS?

>>: Docker Nginx container and Tomcat container to achieve load balancing and dynamic and static separation operations

Implementation code of front-end HTML skin changing function

Enter two numbers in html to realize addition, subtraction, multiplication and division functions

1. parseFloat() function

2. JavaScript global properties

3. Complete code

Implementation code of front-end HTML skin changing function

Detailed explanation of the difference between tags and elements in HTML

Linux operation and maintenance basic swap partition and lvm management tutorial

Use of Linux usermod command

MySQL 5.7.21 installation and password configuration tutorial

How to set the select to be read-only and not editable and the select value to be passable

WeChat applet implementation anchor positioning function example

Detailed explanation of MySQL database--multi-table query--inner join, outer join, subquery, correlated subquery

Analysis and solution of the reason why overflow-y: visible; does not work in CSS

What to do if you forget your password in MySQL 5.7.17

Recommend

Use of LRU algorithm in Vue built-in component keep-alive

Implementation steps for setting up the React+Ant Design development environment

Html comments Symbols for marking text comments in Html

Windows 2019 Activation Tutorial (Office2019)

MySQL sorting by conventional sorting, custom sorting, and sorting by Chinese pinyin letters

How to configure SSL for koa2 service

Detailed example of database operation object model in Spring jdbc

How to display only the center of the image in the img tag in HTML (three methods)

Select does not support double click dbclick event

Use CSS content attr to achieve mouse hover prompt (tooltip) effect

Detailed explanation of the use of css-vars-ponyfill in IE environment (nextjs build)

About installing python3.8 image in docker

How to delete the container created in Docker

The difference between html, xhtml and xml

js native waterfall flow plug-in production