Dia 33

2024-01-23 13:52:08 +01:00
parent ad40171fb4
commit b83034e0ab
12 changed files with 408 additions and 0 deletions
--- a/05/ejercicio05_DOM.html
+++ b/05/ejercicio05_DOM.html
@@ -0,0 +1,62 @@
+<!Doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Compra caja JAVASCRIPT</title>
+		
+		<script>
+
+
+        // Escribir mensaje en el input
+        function mensaje() {
+            // Obtener datos de los inputs
+            let nombre = document.getElementById("nombre").value;
+            let material = document.getElementById("material").value;
+            let tamano = document.querySelector("[name=tamano]:checked").value;
+            let comentarios = document.getElementById("comentarios").value;
+            
+			 // Ver en consola
+            console.log(nombre, material, tamano, comentarios);
+            // Escribir mensaje en el input
+            document.getElementById("respuesta").value = "Hola " + nombre + " has pedido una caja de " + material + " de tamaño " + tamano + ". " + comentarios;
+        }
+		</script>
+		
+	</head>
+	<body>
+		<div id="container">
+			
+            <p>Nombre cliente</p>
+            <input type="text" name="nombre" id="nombre">
+			<p>Material de la caja
+				<!-- Lista de selección -->
+				<select name="material" id="material">
+					<option value="madera">Madera</option>
+					<option value="metal">Metal</option>
+					<option value="plastico">Plástico</option>
+				</select></p>
+				
+				<p>Seleccione un tamaño para la caja</p>
+				<br/>
+				<input type="radio" value="diminuta" name="tamano">Diminuta<br>
+				<input type="radio" value="mediana" name="tamano" checked>Mediana<br>
+				<input type="radio" value="grande" name="tamano">Grande<br>
+				<br>
+				<p>Comentarios</p>
+				<!-- Área de texto -->
+				<textarea name="opinion" rows="10" cols="60" id="comentarios"></textarea>
+				<br>
+				
+				<input type="submit" value="Enviar" onclick="mensaje()">
+				<input type="text" name="respuesta" id="respuesta" size="80">
+				
+				
+				
+				
+		</div>
+		
+		
+		<br>
+		
+	</body>
+</html>