SHARE
TWEET

Untitled

a guest Oct 23rd, 2019 83 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.   <head>
  3.     <title>CAFETERIA</title>
  4.     <meta charset="utf-8" />
  5.     <style>
  6.       body {
  7.         background-color: #e1e637;
  8.       }
  9.       h1 {
  10.         color: #ff090e;
  11.       }
  12.       legend {
  13.         margin-top: 20px;
  14.         margin-bottom: 10px;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <h1>CAFETERIA</h1>
  20.     <form>
  21.       <legend>SELECCIONE EL PLATO PRINCIPAL</legend>
  22.       <input type="radio" id="n1" name="principal" value="12" /> Caldo de pollo
  23.       Q12.00 <br /><br />
  24.       <input type="radio" id="n2" name="principal" value="20" /> pescado frito
  25.       Q20.00<br /><br />
  26.       <input type="radio" id="n3" name="principal" value="25" /> revolcado
  27.       Q25.00<br /><br />
  28.  
  29.       <legend>SELECCIONE SU BEBIDA</legend>
  30.       <input type="radio" id="n4" name="bebida" value="7" /> CocaCola Q7.OO<br /><br />
  31.       <input type="radio" id="n5" name="bebida" value="4" /> Jamaica Q4.00<br /><br />
  32.       <input type="radio" id="n6" name="bebida" value="5" /> Sprite Q5.00<br /><br />
  33.  
  34.       <legend>SELECCIONE SU POSTRE</legend>
  35.       <input type="radio" id="n7" name="postre" value="7" /> Pastel de fresa
  36.       Q7.oo<br /><br />
  37.       <input type="radio" id="n8" name="postre" value="5" /> Helado de Chocolate
  38.       Q5<br /><br />
  39.       <input type="radio" id="n9" name="postre" value="9" /> Coctel de frutas
  40.       Q9.00<br /><br />
  41.       <button>Obtener TOTAL</button>
  42.     </form>
  43.     <script>
  44.       // buscar el <form> y guardarlo en una variable
  45.       const form = document.querySelector('form');
  46.  
  47.       // decir que en el evento enviar se sume el total
  48.       form.addEventListener('submit', obtenerTotal);
  49.  
  50.       function obtenerTotal(event) {
  51.         // evitar enviar el formulario que ocasiona que se refresque la pagina
  52.         event.preventDefault();
  53.  
  54.         // obtener todos los input radio
  55.         const formData = new FormData(event.target);
  56.  
  57.         // convertir los valores a String, o colocar un 0 si no elegieron algo
  58.         const principal = parseInt(formData.get('principal') || '0', 10);
  59.         const bebida = parseInt(formData.get('bebida') || '0', 10);
  60.         const postre = parseInt(formData.get('postre') || '0', 10);
  61.  
  62.         const result = principal + bebida + postre;
  63.         alert("la suma es:" + result);
  64.       }
  65.     </script>
  66.   </body>
  67. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top