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

How to install Maven automatically in Linux continuous integration

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

1. parseFloat() function

2. JavaScript global properties

3. Complete code

How to install Maven automatically in Linux continuous integration

CSS inheritance method

A brief discussion on the placement of script in HTML

Detailed explanation of Linux system directories sys, tmp, usr, var!

The difference between docker run and start

The use and methods of async and await in JavaScript

How to delete an image in Docker

Common parameters of IE web page pop-up windows can be set by yourself

React Hooks Detailed Explanation

How to import, register and use components in batches in Vue

Recommend

JavaScript to implement limited time flash sale function

How to enable or disable SSH for a specific user or user group in Linux

Solution to index failure in MySQL due to different field character sets

How to skip errors in mysql master-slave replication

Brief introduction and usage of Table and div

Example of MySQL slow query

A brief discussion on two methods of achieving semi-transparent background color in CSS

Detailed explanation of the perfect solution to the VMware black screen problem after MacOS catalina upgrade

How to use bar charts in Vue and modify the configuration yourself

MySQL 8.0.21 installation steps and problem solutions

About if contains comma expression in JavaScript

Several ways of running in the background of Linux (summary)

uniapp dynamic modification of element node style detailed explanation

Summary of mysqladmin daily management commands under MySQL (must read)

In-depth understanding of the use of CSS clear:both