1 | <!DOCTYPE html> |
2 | <html lang="es"> |
3 | |
4 | <head> |
5 | <meta charset="UTF-8"> |
6 | <meta name="viewport" |
7 | content="width=device-width"> |
8 | <title>División</title> |
9 | </head> |
10 | |
11 | <body> |
12 | <form |
13 | action="javascript:procesa()"> |
14 | <h1>División</h1> |
15 | <p> |
16 | <label> |
17 | a |
18 | <input id="inA" |
19 | type="number" |
20 | step="0.1" |
21 | required> |
22 | </label> |
23 | </p> |
24 | <p> |
25 | <label> |
26 | b |
27 | <input id="inB" |
28 | type="number" |
29 | step="0.1" |
30 | required |
31 | oninput="validaB()"> |
32 | </label> |
33 | </p> |
34 | <p> |
35 | <button>Dividir</button> |
36 | </p> |
37 | </form> |
38 | <script> |
39 | const NO_0 = "No puede ser 0" |
40 | |
41 | function validaB() { |
42 | const b = inB.valueAsNumber |
43 | |
44 | |
45 | |
46 | if (isNaN(b) || b !== 0) { |
47 | inB.setCustomValidity("") |
48 | } else { |
49 | inB.setCustomValidity(NO_0) |
50 | } |
51 | } |
52 | |
53 | function procesa() { |
54 | const a = inA.valueAsNumber |
55 | const b = inB.valueAsNumber |
56 | const resultado = divide(a, b) |
57 | alert( |
58 | `${a} / ${b} = ${resultado}`) |
59 | } |
60 | |
61 | |
62 | |
63 | |
64 | |
65 | function divide(a, b) { |
66 | return a / b |
67 | } |
68 | </script> |
69 | </body> |
70 | |
71 | </html> |