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: pedro,, en 20 de Enero 2016, 23:59
-
Hola, dejo otro ejercicio para revisar.
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.
<!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.
-
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í:
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