Tema: Como llamar al texto de un input, por su id?
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 08/04/2014, 06:12
MarLeGar
 
Fecha de Ingreso: abril-2014
Mensajes: 4
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Como llamar al texto de un input, por su id?
Buenos días patilanz,

Efectivamente ayer tenia clase y resolvimos el ejercicio. Te copio los códigos que usamos para que me des la opinión que te refiera.

Código HTML:
Código HTML: 
Ver original
  1. <body>
  2.     <h1 id="titulo">Calculador del coste de pintar una habitación</h1>
  3.     <!-- ENTRADA DE LAS DIMENSIONES -->
  4.     <fieldset id="datos">
  5.         <legend>Medidas de la habitación</legend>
  6.         <table border=0>
  7.             <tr>
  8.                 <td class="celdalabel">
  9.                     <label>Longitud</label>
  10.                 </td>
  11.                 <td class="celdainput">
  12.                     <input type="text" id="longitud" name="longitud" size="10" autofocus/><label>m</label>  
  13.                 </td>
  14.                 <td rowspan="3" class="celdaimagen">
  15.                     <img src="habitacion.png" height="200px"/>
  16.                 </td>
  17.             </tr>
  18.             <tr>
  19.                 <td class="celdalabel">
  20.                     <label>Profundidad</label>
  21.                 </td>
  22.                 <td class="celdainput">
  23.                     <input type="text" id="profundidad" name="profundidad" size="10"/><label>m</label>
  24.                 </td>
  25.             </tr>
  26.             <tr>
  27.                 <td class="celdalabel">
  28.                     <label>Altura</label>
  29.                 </td>
  30.                 <td class="celdainput">
  31.                     <input type="text" id="altura" name="altura" size="10"/><label>m</label>    
  32.                 </td>
  33.             </tr>
  34.         </table>
  35.     </fieldset>
  36.     
  37.     <!-- DATOS DEL BOTE -->
  38.     <fieldset>
  39.     <legend>Tipo de pintura</legend>
  40.     <table border="0">
  41.     <tr>
  42.         <td colspan="3" id="nombrebote">
  43.             VALSPAR
  44.         </td>
  45.         <td colspan="3" id="nombrebote">
  46.             OLIMPIC PREMIUM
  47.         </td>
  48.         <td colspan="3" id="nombrebote">
  49.             BEHR ULTRA
  50.         </td>
  51.     </tr>
  52.     <tr>
  53.         <td id="celdaseleccion">
  54.             <input type="radio" id="tipoA" name="tipopintura"/>
  55.         </td>
  56.         <td id="celdabote">
  57.             <img src="bote1.png"/>
  58.         </td>
  59.         <td id="celdadescripcion">
  60.             <label>Especial interiores<br/>10 m<sup>2</sup> / bote<br/>7.32 €</label>
  61.         </td>
  62.         <td id="celdaseleccion">
  63.             <input type="radio" id="tipoB" name="tipopintura"/>
  64.         </td>
  65.         <td id="celdabote">
  66.             <img src="bote2.png"/>
  67.         </td>
  68.         <td id="celdadescripcion">
  69.             <label>Especial exteriores<br/>15 m<sup>2</sup> / bote<br/>10.35 €</label>
  70.         </td>
  71.         <td id="celdaseleccion">
  72.             <input type="radio" id="tipoC" name="tipopintura"/>
  73.         </td>
  74.         <td id="celdabote">
  75.             <img src="bote3.png"/>
  76.         </td>
  77.         <td id="celdadescripcion">
  78.             <label>
  79.                 Todas superficies<br/>20 m<sup>2</sup> / bote<br/>16.99 €</label>
  80.         </td>
  81.     </table>
  82.     </fieldset>
  83.     
  84.     <!--Calculador-->
  85.     <fieldset>
  86.         <table border="0">
  87.         <tr>
  88.             <td id="celdaboton">
  89.                 <div id="botoncalcular">
  90.                 <button onClick="calcular()">Pulsa para calcular</button>
  91.                 </div>
  92.             </td>
  93.             <td id="celdaresultado">
  94.             
  95.             </td>
  96.         </tr>
  97.         </table>
  98.     </fieldset>
  99. </body>

Código JavaScript:
Código Javascript: 
Ver original
  1. /* valores de los diferentes precios */
  2.         var boteTipoA = 7.32;
  3.         var boteTipoB = 10.35;
  4.         var boteTipoC = 16.99;
  5.         var metrosTipoA = 10;
  6.         var metrosTipoB = 15;
  7.         var metrosTipoC = 20;
  8.         var nombreTipoA = "VALSPAR";
  9.         var nombreTipoB = "OLIMPIC PREMIUM";
  10.         var nombreTipoC = "BEHR ULTRA";
  11.                     
  12.         function calcular()
  13.         {
  14.             /* Comprueba que estén todos los valores */
  15.             if (document.getElementById('longitud').value == false)
  16.                 {
  17.                     alert("No ha introducido la longitud de la habitación");
  18.                     document.getElementById('longitud').focus();
  19.                     return;
  20.                 } else {
  21.                     longitud = Number(document.getElementById('longitud').value);
  22.                 }
  23.             if (document.getElementById('profundidad').value == false)
  24.                 {
  25.                     alert("No ha introducido la profundidad de la habitación");
  26.                     document.getElementById('profundidad').focus();
  27.                     return;
  28.                 } else {
  29.                     profundidad = Number(document.getElementById('profundidad').value);
  30.                 }
  31.  
  32.             if (document.getElementById('altura').value == false)
  33.                 {
  34.                     alert("No ha introducido la altura de la habitación");
  35.                     document.getElementById('altura').focus();
  36.                     return;
  37.                 } else {
  38.                     altura = Number(document.getElementById('altura').value);
  39.                 }
  40.                 
  41.             /* Escoger un tipo de pintura */
  42.             var metrosxbote = 0;
  43.             var precioxbote = 0;
  44.             var tipopintura ="";
  45.  
  46.             if (document.getElementById('tipoA').checked)
  47.                 {
  48.                     metrosxbote = metrosTipoA;
  49.                     precioxbote = boteTipoA;
  50.                     tipopintura = nombreTipoA;
  51.                 }
  52.  
  53.             if (document.getElementById('tipoB').checked)
  54.                 {
  55.                     metrosxbote = metrosTipoB;
  56.                     precioxbote = boteTipoB;
  57.                     tipopintura = nombreTipoB;
  58.                 }
  59.  
  60.             if (document.getElementById('tipoC').checked)
  61.                 {
  62.                     metrosxbote = metrosTipoC;
  63.                     precioxbote = boteTipoC;
  64.                     tipopintura = nombreTipoC;
  65.                 }
  66.  
  67.             /* Si son 0 es que no se eligió tipo de pintura */
  68.             if (metrosxbote == 0)
  69.                 {
  70.                     alert("No ha escogido el tipo de pintura que quiere utilizar");
  71.                     return;
  72.                 }
  73.  
  74.             /*Si estamos aquí calculamos... */
  75.             /* El área total */
  76.             var areatotal = (longitud * profundidad) + (2 * longitud * altura) + (2 + profundidad * altura);
  77.             /* Los botes de pintura */
  78.             var botespintura = Math.ceil(areatotal/metrosxbote);
  79.             /* El precio total */
  80.             var preciototal = precioxbote * botespintura;
  81.             
  82.             /*Mostrar la información */
  83.             var texto = "La superficie total a pintar es de " + areatotal + " m<sup>2</sup>.<br/>";
  84.             texto = texto + "Necesitará " + botespintura + " botes de " + tipopintura + ".<br/>";
  85.             texto = texto + "El precio total de la pintura será " + preciototal.toFixed(2) + " €";
  86.             document.getElementById('celdaresultado').innerHTML = texto;
  87.         }

Me gustaría si es posible, que me facilitaras (si conoces) información sobre cursos gratuitos o subvencionados para complementar mi formación.

En forosdelweb vi un anuncio de la siguiente pagina " https://mejorando.la/cursos/ ", si tu, o alguien que conozca esta web pudiera darme su opinión, se lo agradecería.

Aunque ahora estoy realizando este curso de desarrollo de paginas web, me gustaría formarme también en programación multiplataforma, o desarrollo de aplicaciones para móviles.

Los dos temas me llaman mucho la atención, mi problema es que actualmente no cuento con muchos recursos económicos para realizar formaciones privadas, por ello busco cursos (serios) gratuitos o subvencionados. Cualquiera que pueda aportarme información al respecto se lo agradecería sinceramente.

Gracias de nuevo por comentar y ayudarme a entender un poco mejor la lógica de algunas propiedades js. Espero contar de nuevo con tu ayuda y la de mas miembros del foro en próximas consultas (que las habrá :D).

Un saludo cordial,
Martín.