Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Dimitar Stefanov en 21 de Abril 2016, 20:38
-
Buenas tardes.
A continuación hago la entrega del ejercicio CU01177E del curso JavaScript desde cero.
EJERCICIO
Crea un código HTML donde tengas un formulario con seis inputbox de texto que servirán para pedir al usuario Nombre, Apellidos, Correo electrónico, Teléfono, Domicilio y País. Crea el código JavaScript para que los elementos 1, 4, 7, 10 etc. del formulario tomen color de fondo amarillo cuando el usuario pulse sobre ellos. Los elementos 2, 5, 8, 11, etc. del formulario deberán tomar color de fondo azul claro cuando el usuario pulse sobre ellos. Los elementos 3, 6, 9, 12, 15, etc. del formularios deberán tomar color de fondo verde claro cuando el usuario pulse sobre ellos.
El código:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style type="text/css">
label{
display: block;
margin: 5px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var formularios = document.forms;
for(var i=0; i<formularios[0].elements.length; i=i+3){
if(formularios[0].elements[i].type == 'text'){
formularios[0].elements[i].addEventListener('click',function(elEvento){cambiarColor(elEvento,'yellow',this);});
}
}
for(var i=1; i<formularios[0].elements.length; i=i+3){
if(formularios[0].elements[i].type == 'text'){
formularios[0].elements[i].addEventListener('click',function(elEvento){cambiarColor(elEvento,'blue',this);});
}
}
for(var i=2; i<formularios[0].elements.length; i=i+3){
if(formularios[0].elements[i].type == 'text'){
formularios[0].elements[i].addEventListener('click',function(elEvento){cambiarColor(elEvento,'green',this);});
}
}
}
function cambiarColor(elEvento,elColor,quienEsThis){
quienEsThis.style.backgroundColor = elColor;
}
</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>
<form action="accion1.html" name="formularioContacto" method="get">
<h2>Formulario de contacto</h2>
<label>Nombre:<input type="text" name="nombre" id="nombreFormContacto" maxlength="4"></label>
<label>Apellidos:<input type="text" name="apellidos" id="apellidosFormContacto"></label>
<label>Correo Electrónico: <input type="text" name="correo" id="correoFormContacto"></label>
<label>Teléfono: <input type="text" name="telefono" id="telefonoFormContacto"></label>
<label>Domicilio: <input type="text" name="domicilio" id="domicilioFormContacto"></label>
<label>País: <input type="text" name="pais" id="paisFormContacto"></label>
<label><input type="submit" value="Enviar" id="botonEnvio1"></label>
</form>
</body>
</html>
Gracias
-
Buenas.
Todo bien.
Tu código se podría optimizar un poco habiendo usado un único bucle y no tres, te recomiendo que veas otros ejemplos.
https://www.aprenderaprogramar.com/foros/index.php?topic=4223.msg17603#msg17603
Saludos. ;D
-
Hola, pedro,,
Gracias por otro ejercicio más corregido.
Sí, acabo de mirar el código de bermatinv y está usando un sólo bucle. Además, está utilizando dos funciones, una que colorá el campo sobre el que se ha ejecutado el 'click' y la otra función se activa cuando el campo en cuestión deja de tener el focus, mediante el evento 'blur'. Es interesante.
Debo decir también que el compañero bermartinv siempre tiene un acabado bastante bonito (cuida el diseño), de sus ejercicios.
Gracias.