Autor Tema: JavaScript addEventListener Función anónima manejadora de eventos CU01177E (Leído 2050 veces)

pedro,, · « **en:** 20 de Enero 2016, 23:59 »

Hola, dejo otro ejercicio para revisar.

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.

Código: [Seleccionar]

<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
	<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.length;i++){
				for (var j=0; j<formularios[i].elements.length; j++){
					if (formularios[i].elements[j].type=='text' && ((j+1)==1 || (j+1)%3==1)) {
						formularios[i].elements[j].addEventListener('click', function(elEvento) {cambiaColor(elEvento, 'yellow', this);});
					}else if(formularios[i].elements[j].type=='text' && ((j+1)==2 || (j+1)%3==2)){
						formularios[i].elements[j].addEventListener('click', function(elEvento){cambiaColor(elEvento, 'cyan', this);});
					}else{
						formularios[i].elements[j].addEventListener('click', function(elEvento){cambiaColor(elEvento, 'MediumSpringGreen', this);});
					}
				}
			}             
		}

		function cambiaColor (elEvento, elColor, quienEsThis) {
			quienEsThis.style.backgroundColor=elColor;
		}
	</script>
	</head>
	<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
		<form name ="formularioContacto" method="get" action="accion1.html">
			<h2>Formulario de pruebas</h2>
			<label>Nombre:<input id="nombre" type="text" name="nombre"/></label>
			<label>Apellidos:<input id="apellidos" type="text" name="apellidos" /></label>
			<label>Correo electrónico:<input id="email" type="text" name="email"/></label>
			<label>Teléfono:<input id="tlf" type="text" name="tlf" /></label>
			<label>Domicilio:<input id="domicilio" type="text" name="domicilio"/></label>
			<label>País:<input id="pais" type="text" name="pais" /></label>
			<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
		</form>
	</body>
</html>

Saludos.

Ogramar · « **Respuesta #1 en:** 22 de Enero 2016, 09:26 »

Buenas Pedro lo veo todo bien. Has creado dos bucles, uno para recorrer los formularios y otro para recorrer los elementos dentro del formulario, en este ejercicio sólo hay un formulario con lo cual nos podíamos haber ahorrado un bucle

Quedaría así:

Código: [Seleccionar]

				for (var j=0; j<formularioContacto.elements.length; j++){
					if (formularioContacto.elements[j].type=='text' && ((j+1)==1 || (j+1)%3==1)) {
						formularioContacto.elements[j].addEventListener('click', function(elEvento) {cambiaColor(elEvento, 'yellow', this);});
					}else if(formularioContacto.elements[j].type=='text' && ((j+1)==2 || (j+1)%3==2)){
						formularioContacto.elements[j].addEventListener('click', function(elEvento){cambiaColor(elEvento, 'cyan', this);});
					}else{
						formularioContacto.elements[j].addEventListener('click', function(elEvento){cambiaColor(elEvento, 'MediumSpringGreen', this);});
					}
				}

Aunque me gusta como lo has definido tú porque es más general, no está ligado a un nombre de formulario concreto

Salu2

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

Noticias:

Autor Tema: JavaScript addEventListener Función anónima manejadora de eventos CU01177E (Leído 2050 veces)

pedro,,

JavaScript addEventListener Función anónima manejadora de eventos CU01177E

Ogramar

Re:JavaScript addEventListener Función anónima manejadora de eventos CU01177E

Preguntas y respuestas

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

Noticias:

Autor Tema: JavaScript addEventListener Función anónima manejadora de eventos CU01177E (Leído 2050 veces)

pedro,,

JavaScript addEventListener Función anónima manejadora de eventos CU01177E

Ogramar

Re:JavaScript addEventListener Función anónima manejadora de eventos CU01177E

Preguntas y respuestas

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