Untitled

<html>
  <head>
    <title>CAFETERIA</title>
    <meta charset="utf-8" />
    <style>
      body {
        background-color: #e1e637;
      }
      h1 {
        color: #ff090e;
      }
      legend {
        margin-top: 20px;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>CAFETERIA</h1>
    <form>
      <legend>SELECCIONE EL PLATO PRINCIPAL</legend>
      <input type="radio" id="n1" name="principal" value="12" /> Caldo de pollo
      Q12.00 <br /><br />
      <input type="radio" id="n2" name="principal" value="20" /> pescado frito
      Q20.00<br /><br />
      <input type="radio" id="n3" name="principal" value="25" /> revolcado
      Q25.00<br /><br />

      <legend>SELECCIONE SU BEBIDA</legend>
      <input type="radio" id="n4" name="bebida" value="7" /> CocaCola Q7.OO<br /><br />
      <input type="radio" id="n5" name="bebida" value="4" /> Jamaica Q4.00<br /><br />
      <input type="radio" id="n6" name="bebida" value="5" /> Sprite Q5.00<br /><br />

      <legend>SELECCIONE SU POSTRE</legend>
      <input type="radio" id="n7" name="postre" value="7" /> Pastel de fresa
      Q7.oo<br /><br />
      <input type="radio" id="n8" name="postre" value="5" /> Helado de Chocolate
      Q5<br /><br />
      <input type="radio" id="n9" name="postre" value="9" /> Coctel de frutas
      Q9.00<br /><br />
      <button>Obtener TOTAL</button>
    </form>
    <script>
      // buscar el <form> y guardarlo en una variable
      const form = document.querySelector('form');

      // decir que en el evento enviar se sume el total
      form.addEventListener('submit', obtenerTotal);

      function obtenerTotal(event) {
        // evitar enviar el formulario que ocasiona que se refresque la pagina
        event.preventDefault();

        // obtener todos los input radio
        const formData = new FormData(event.target);

        // convertir los valores a String, o colocar un 0 si no elegieron algo
        const principal = parseInt(formData.get('principal') || '0', 10);
        const bebida = parseInt(formData.get('bebida') || '0', 10);
        const postre = parseInt(formData.get('postre') || '0', 10);

        const result = principal + bebida + postre;
        alert("la suma es:" + result);
      }
    </script>
  </body>
</html>