Residents in JavaScript 1

Code

First, practice some operations related to numbers:

<div>
    <label>Number A:<input id="radio-a" type="radio" name="math-obj" value="a"></label><input id="num-a" type="text">
    <label>Number B:<input id="radio-b" type="radio" name="math-obj" value="b"></label><input id="num-b" type="text">
</div>
<div>
    < button > judge whether the input content of the currently selected input box is a number < / button >
    < button > round A to B decimal places < / button >
    < button > the absolute value of the currently selected number < / button >
    < button > round up the currently selected number < / button >
    < button > rounds down the currently selected number < / button >
    < button > rounds the currently selected number to the nearest integer < / button >
    < button > returns the highest value in A and B < / button >
    < button > returns the lowest value in A and B < / button >        
</div>
<p id="result"></p>

Based on the above HTML, realize the requirements

  • Implement the function according to the description of the button in HTML
  • The calculation result is displayed in the P tag with id result
  • In addition to the first button, when other buttons operate, it is necessary to determine whether the input is a number, otherwise, output the error information in console
  1 <!DOCTYPE html>
  2 <html>
  3 
  4 <head>
  5     <meta charset="utf-8" />
  6     <title>JS Residents 1</title>
  7 
  8 </head>
  9 
 10 <body>
 11     <div>
 12         <label>Number A:<input id="radio-a" type="radio" name="math-obj" value="a"></label><input id="num-a" type="text">
 13         <label>Number B:<input id="radio-b" type="radio" name="math-obj" value="b"></label><input id="num-b" type="text">
 14     </div>
 15     <div>
 16         <button>Determine whether the input content of the currently selected input box is a number</button>
 17         <button>hold A Round to the nearest B Number of decimal places</button>
 18         <button>Absolute value of the currently selected number</button>
 19         <button>Round up the currently selected number</button>
 20         <button>Rounds down the currently selected number</button>
 21         <button>Rounds the currently selected number to the nearest integer</button>
 22         <button>Return A and B Highest value in</button>
 23         <button>Return A and B Lowest value in</button>
 24     </div>
 25     <p id="result"></p>
 26 
 27     <script>
 28         //Define constants
 29         const numA = document.getElementById("num-a");
 30         numB = document.getElementById("num-b");
 31         radioA = document.getElementById("radio-a");
 32         radioB = document.getElementById("radio-b");
 33         buttons = document.getElementsByTagName("button"); //Button array
 34         p = document.getElementById("result");
 35         //Define digital check
 36         function isNumber(num) {
 37             if (!isNaN(num.value) && num.value != "") {
 38                 return true;
 39             } else {
 40                 return false;
 41             }
 42         }
 43         //Definition check
 44         function isCheck(check) {
 45             if (check.checked) {
 46                 return true;
 47             } else {
 48                 return false;
 49             }
 50         }
 51         //Button 1 listens and clicks to determine whether the input content of the currently selected input box is a number
 52         buttons[0].addEventListener("click", function () {
 53             if (isCheck(radioA)) {
 54                 if (isNumber(numA)) {
 55                     p.innerHTML = "This is a number";
 56                 } else {
 57                     p.innerHTML = "This is not a number";
 58                     console.log("This is not a number ha!");
 59                 }
 60             }
 61             if (isCheck(radioB)) {
 62                 if (isNumber(numB)) {
 63                     p.innerHTML = "This is a number";
 64                 } else {
 65                     p.innerHTML = "This is not a number";
 66                     console.log("This is not a number ha!");
 67                 }
 68             }
 69         })
 70         //Button 2 monitor and click to realize A Round to the nearest B Number of decimal places
 71         buttons[1].addEventListener("click", function () {
 72             if (isNumber(numA) && isNumber(numB)) {
 73                 var A = parseFloat(numA.value);
 74                 p.innerHTML = A.toFixed(parseInt(numB.value));
 75             } else {
 76                 console.log("Must be all numbers!")
 77             }
 78         })
 79         //Button 3 listens and clicks to realize the absolute value of the currently selected number
 80         buttons[2].addEventListener("click", function () {
 81             if (isCheck(radioA)) {
 82                 if (isNumber(numA)) {
 83                     p.innerHTML = Math.abs(Number(numA.value));
 84                 } else {
 85                     console.log("Non numeric!");
 86                 }
 87             }
 88             if (isCheck(radioB)) {
 89                 if (isNumber(numB)) {
 90                     p.innerHTML = Math.abs(Number(numB.value));
 91                 } else {
 92                     console.log("Non numeric!");
 93                 }
 94             }
 95         })
 96         //Button 4 listens and clicks to round up the currently selected number
 97         buttons[3].addEventListener("click", function () {
 98             if (isCheck(radioA)) {
 99                 p.innerHTML = Math.ceil(Number(numA.value));
100             }
101             if (isCheck(radioB)) {
102                 p.innerHTML = Math.ceil(Number(numB.value));
103             }
104         })
105         //Button 5 listens and clicks to round down the currently selected number
106         buttons[4].addEventListener("click", function () {
107             if (isCheck(radioA)) {
108                 p.innerHTML = Math.floor(Number(numA.value));
109             }
110             if (isCheck(radioB)) {
111                 p.innerHTML = Math.floor(Number(numB.value));
112             }
113         })
114         //Button 6 listens and clicks to round the currently selected number to the nearest integer
115         buttons[5].addEventListener("click", function () {
116             if (isCheck(radioA)) {
117                 p.innerHTML = Math.round(Number(numA.value));
118             }
119             if (isCheck(radioB)) {
120                 p.innerHTML = Math.round(Number(numB.value));
121             }
122         })
123         //Button 7 monitor and click to return A and B Highest value in
124         buttons[6].addEventListener("click", function () {
125             p.innerHTML = Math.max(Number(numA.value), Number(numB.value));
126         })
127         //Button 8 monitor and click to return A and B Minimum in
128         buttons[7].addEventListener("click", function () {
129             p.innerHTML = Math.min(Number(numA.value), Number(numB.value));
130         })
131     </script>
132 </body>
133 
134 </html>

Note: Math.round() judges that if there is a decimal point greater than or equal to 0.5, the integer is taken up. For example, Math.round (- 1.5) = - 1; Math.round (1.5) = 2

Tags: Javascript

Posted on Tue, 03 Dec 2019 05:34:07 -0800 by hannnndy