Foros del Web - Ver Mensaje Individual - Como llamar al texto de un input, por su id?

MarLeGar · #3 (**permalink**) 07/04/2014, 06:55

Hola patilanz (y compañía),

Gracias por responderme al mensaje, por lo que veo no iba mal encaminado. Intento aplicarle la lógica, aunque no siempre acierto.

Lo de ponerlo en el head el script no he terminado de entender porque no recupera los datos del body, sobre la palabra value, es cierto que nos lo dijo en clase, pero se me había olvidado por completo jejeje.

Aprovecho para hacerte un par de preguntas mas si me lo permites. Una es sobre la forma de copiar o insertar el código aquí en el foro, que me he fijado que lo escribís como si fuera un editor de texto tipo notepad (el cual, es el que usamos en clase para hacer todo). Como puedo insertar el código en el foro y que me quede así como lo has puesto tu?

Y la segunda pregunta, es sobre el ejercicio. Estoy intentando llamar las options de un select, identificando tanto el select como cada una de las options disponibles. De forma que he creado 3 nuevas variables con un valor definido para cada una de ellas, y una nueva variable para el select.

Te copio el código y me comentas si puedes por donde voy mal.

De nuevo gracias de antemano por tu comentario.

Un saludo cordial,
Martín.

Cita:

<!DOCTYPE html>
<html>
<head>
<title>
Ejemplo "JavaScrip-16" - Calcular superficie m2
</title>


<style type="text/css">
body {
margin: 0px;
background-image: url(js_16.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: top left;
}

#body_contain {
width: 900px;
height: 500px;
background-color: rgba(4,149,179,0.85);
margin: auto;
margin-top: 20px;
position: relative;
}

fieldset {
display: inline-block;
width: 600px;
background-color: #C4F5FF;
border: none;
border-radius: 3px 3px;
/*box-shadow:;*/
margin-top: 20px;
margin-left: 20px;
}

table {
border: 1px solid white;
border-collapse: collapse;
margin-bottom: -5px; /* Le he restado 5px en la parte de abajo de la tabla, porque con la etiqueta <!DOCTYPE html> aplica un margen inferior de 5px en varios elementos. */
}

[colspan="3"] {
text-align: center;
}

</style>

</head>
<body>


<script>

/*Funcion que calcula los metros de superficie*/
function calculate_meters()
{
/*Variables que almacenan los datos que necesito para calcular, mediante los input del formulario*/
var alto = Number(document.getElementById('alto').value);
var ancho = Number(document.getElementById('ancho').value);
var largo = Number(document.getElementById('largo').value);

var area1 = ancho * alto;
var area2 = area1;
var area3 = largo * alto;
var area4 = area3;
var area5 = ancho * largo;
var meters2 = area1 + area2 + area3 + area4 + area5;

alert('La superficio a pintar son: ' + meters2 + ' m2');
}

/*Funcion que calcula el precio de la pintura*/
function calculate_price()
{

/*Variables que almacenan los datos que necesito para calcular, mediante los input del formulario*/
var alto = Number(document.getElementById('alto').value);
var ancho = Number(document.getElementById('ancho').value);
var largo = Number(document.getElementById('largo').value);

var area1 = ancho * alto;
var area2 = area1;
var area3 = largo * alto;
var area4 = area3;
var area5 = ancho * largo;
var meters2 = area1 + area2 + area3 + area4 + area5;

/*Variables que le asignan un valor a los cuadros de opciones del select.*/
var small = Number(document.getElementById('small') + 6.37);
var medium = Number(document.getElementById('medium') + 10.15);
var big = Number(document.getElementById('big') + 19.99);

var bote = document.getElementById('botes').value;

/*Boton que da el resultado del precio*/
var price = meters2 / bote;

alert('Necesitas: ' + price + ' m2');
}

</script>

<div id="body_contain">
<fieldset>

<table border="1">
<tr>
<td><legend>Largo</legend></td>
<td><input id="largo"></input></td>
<td>m</td>
</tr>

<tr>
<td><legend>Ancho</legend></td>
<td><input id="ancho"></input></td>
<td>m</td>
</tr>

<tr>
<td><legend>Alto</legend></td>
<td><input id="alto"></input></td>
<td>m</td>
</tr>

<tr>
<td><legend>Elige un bote</legend></td>
<td colspan="2">
<select id="botes" name="botes">
<option id="small" value="" label="Pequeño (10 m²)" selected>Pequeño (10 m²)</option>
<option id="medium" value="" label="Mediano (20 m²)">Mediano (20 m²)</option>
<option id="big" value="" label="Grande (40 m²)">Grande (40 m²)</option>
</select>
</td>
</tr>



<tr>
<td colspan="3">
<button id="calculate_meters" title="Pulsa para calcular metros" alt="Pulsa para calcular los metros" onClick="calculate_meters()">CALCULAR METROS</button>

<button id="calculate_price" title="Pulsa para calcular el precio" alt="Pulsa para calcular el precio" onClick="calculate_price()">CALCULAR PRECIO</button>
</td>
</tr>
</table>

</fieldset>
</div>

</body>
</html>

PD: Como puedes ver, ya he modificado correctamente la primera parte que tenia fallos. ;)