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> |
9 | Formulario con 2 botones |
10 | </title> |
11 | </head> |
12 | |
13 | <body> |
14 | <form |
15 | action=javascript:procSuma()> |
16 | <h1> |
17 | Formulario con 2 botones |
18 | </h1> |
19 | <p> |
20 | <label> |
21 | a |
22 | <input id=inA type=number |
23 | required min="0.1" max="100" |
24 | step="0.1"> |
25 | </label> |
26 | </p> |
27 | <p> |
28 | <label> |
29 | b |
30 | <input id=inB type=number |
31 | required min="0.1" max="100" |
32 | step="0.1"> |
33 | </label> |
34 | </p> |
35 | <p> |
36 | <button>Sumar</button> |
37 | <button formaction="javascript: |
38 | procResta()"> |
39 | Restar |
40 | </button> |
41 | </p> |
42 | </form> |
43 | <script> |
44 | function procSuma() { |
45 | const a = inA.valueAsNumber |
46 | const b = inB.valueAsNumber |
47 | const resultado = suma(a, b) |
48 | alert( |
49 | `${a} + ${b} = ${resultado}`) |
50 | } |
51 | |
52 | function procResta() { |
53 | const a = inA.valueAsNumber |
54 | const b = inB.valueAsNumber |
55 | const resultado = resta(a, b) |
56 | alert( |
57 | `${a} - ${b} = ${resultado}`) |
58 | } |
59 | |
60 | function suma(a, b) { |
61 | return a + b |
62 | } |
63 | |
64 | function resta(a, b) { |
65 | return a - b |
66 | } |
67 | </script> |
68 | </body> |
69 | |
70 | </html> |