Como llamar al texto de un input, por su id? Buscando información en Google sobre como encontrar una solución a mi pregunta, he descubierto este foro. Disculpar si mi primer mensaje es una consulta
.Os expongo un poco mi caso. En enero empece un curso del inem de confección y publicación de paginas web (así lo define la academia), el cual se compone de varios módulos, empezando por html5, seguido de css, formularios, javascipt, jquery, php, mysql, etc.
Por ahora vamos por js, en la primera semana de clase de este modulo. He de decir que este curso es para personas que comienzan desde 0 en este campo.
Los módulos anteriores me resultaron bastante sencillos de entender, pero en el caso del js, reconozco que aun no he cogido la lógica a la hora de aplicar los procesos y me pierdo bastante.
Después de la pequeña introducción, os explico el motivo de mi consulta.
Estamos haciendo un ejercicio que entiendo que para vosotros sera muy sencillo (y por eso estoy aquí), en el cual, tenemos que crear un pequeño formulario donde se pidan 4 o 5 datos, y al hacer click en el botón, nos muestre un mensaje de alerta o bien nos lo escriba en otro cuadro que podríamos poner nosotros.
Yo he empezado con lo siguiente, pero me he atascado.
Cita:
Entiendo que lo que estoy haciendo es, asignarle un id a los input, después creo una variable a la cual le daré el valor que escriban en el input llamándole por su id (no se si voy mal encaminado, que seguro es que si porque no funciona), y por ultimo creo la función para el botón, que al clickar en el, me tiene que devolver la operación escrita en la función.<!DOCTYPE html>
<html>
<head>
<title>
Ejemplo "JavaScrip-16" - Calcular superficie m2
</title>
<!--Estils del document-->
<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>
<!--Javascript-->
<script>
/*Variables que necesitamos para calcular todos los datos solicitados mediante el formulario*/
var alto = Number(document.getElementById('alto'));
var ancho = Number(document.getElementById('ancho'));
var largo = Number(document.getElementById('largo'));
/*Funcion que calcula el precio de la pintura*/
function calcular()
{
var area1 = ancho * alto;
var area2 = area1;
var area3 = largo * alto;
var area4 = area3;
var area5 = ancho * largo;
var metros2 = area1 + area2 + area3 + area4 + area5;
alert('La superficio a pintar son: ' + metros2 + ' m2');
}
</script>
</head>
<body>
<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>
<!-- Ir añadiendo cuando funcionen las otras.
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
-->
<tr>
<td colspan="3">
<button id="calcular" title="Pulsa para calcular el precio" alt="Pulsa para calcular el precio" onClick="calcular()">CALCULAR PRECIO</button>
</td>
</tr>
</table>
</fieldset>
</div>
</body>
</html>
<html>
<head>
<title>
Ejemplo "JavaScrip-16" - Calcular superficie m2
</title>
<!--Estils del document-->
<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>
<!--Javascript-->
<script>
/*Variables que necesitamos para calcular todos los datos solicitados mediante el formulario*/
var alto = Number(document.getElementById('alto'));
var ancho = Number(document.getElementById('ancho'));
var largo = Number(document.getElementById('largo'));
/*Funcion que calcula el precio de la pintura*/
function calcular()
{
var area1 = ancho * alto;
var area2 = area1;
var area3 = largo * alto;
var area4 = area3;
var area5 = ancho * largo;
var metros2 = area1 + area2 + area3 + area4 + area5;
alert('La superficio a pintar son: ' + metros2 + ' m2');
}
</script>
</head>
<body>
<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>
<!-- Ir añadiendo cuando funcionen las otras.
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
-->
<tr>
<td colspan="3">
<button id="calcular" title="Pulsa para calcular el precio" alt="Pulsa para calcular el precio" onClick="calcular()">CALCULAR PRECIO</button>
</td>
</tr>
</table>
</fieldset>
</div>
</body>
</html>
Gracias de antemano por las respuestas, tener en cuenta que solo llevo una semana dando clase de js y posiblemente algunas de las indicaciones que me deis ni las he estudiado aun.
PD: Si alguien conoce tutoriales, video tutoriales, cursos online gratuitos sobre diseño, programación y publicación de paginas, le agradecería que me dejase los enlaces.
PD2: Como ponéis en la publicación del tema, la hoja del editor de texto con los números de linea?
Un saludo cordial,
Martín.
