62 lines
1.9 KiB
HTML
62 lines
1.9 KiB
HTML
<!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> |