Autor Tema: JavaScript, addEventListener, función anónima manejadora de eventos CU01177E (Leído 3425 veces)

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.

Citar

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:

Código: [Seleccionar]

<!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

pedro,, · « **Respuesta #1 en:** 21 de Abril 2016, 22:36 »

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.

Dimitar Stefanov · « **Respuesta #2 en:** 22 de Abril 2016, 12:29 »

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.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: