Autor Tema: JavaScript modificar y conocer atributos setAttribute y getAttribute CU01176E# (Leído 3659 veces)

pedro,, · « **en:** 17 de Enero 2016, 23:55 »

Otro ejercicio mas, CU01176E.

Citar

Dado el siguiente código HTML:
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css"> label{display:block;margin:5px;}</style>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aquí</div>
<form name ="formularioContacto" method="get" action="accion1.html">
<h2>Formulario de contacto</h2>
<label>Nombre:<input id="nombreFormContacto" type="text" name="nombre" maxlength="4"/></label>
<label>Apellidos:<input id="apellidosFormContacto" type="text" name="apellidos" /></label>
<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
</form>
<form name ="formularioReclamacion" method="get" action="accion2.html">
<h2>Formulario de reclamación</h2>
<label>Motivo reclamación:<input id="motivoFormReclama" type="text" name="motivo" /></label>
<label>Fecha del hecho:<input id="fechaFormReclama" type="text" name="fecha" /></label>
<label><input id="botonEnvio2" type="submit" value="Enviar"></label>
</form>
</body>
</html>

Crea un script que recorra todos los elementos input dentro de cada uno de los formularios presentes y si son de tipo text, modifique su atributo asociado maxlength usando el método setAttribute de los objetos tipo Element para limitar a 8 el número máximo de caracteres que pueda introducir el usuario. Una vez modificado el atributo, muestra por pantalla el valor que tiene dicho atributo para todos los elementos de tipo input usando el método getAttribute.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head>
		<title>Ejercicio CU01176E 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 ejemplo = document.getElementById('ejemplo');
				ejemplo.addEventListener("click", ejecutarEjercicio);
			}
			function ejecutarEjercicio() {
				var msg = '';
				var formularios = document.forms;
				for (var i=0; i<formularios.length;i++){
					msg += '\n\nEn el formulario: ' + formularios[i].name;
					for (var j=0; j<formularios[i].elements.length; j++){
						if (formularios[i].elements[j].type=='text' ) {
							formularios[i].elements[j].setAttribute('maxlength', '8')
							msg += '\n\nValor de maxlength del elemento con id ' + formularios[i].elements[j].id + ' es ';
							msg += formularios[i].elements[j].getAttribute('maxlength');
						}
					}
				}
				alert (msg);
			}
		</script>
	</head>
	<body>
		<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
		<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aquí</div>
		<form name ="formularioContacto" method="get" action="accion1.html">
			<h2>Formulario de contacto</h2>
			<label>Nombre:<input id="nombreFormContacto" type="text" name="nombre" maxlength="4"/></label>
			<label>Apellidos:<input id="apellidosFormContacto" type="text" name="apellidos" /></label>
			<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
		</form>
		<form name ="formularioReclamacion" method="get" action="accion2.html">
			<h2>Formulario de reclamación</h2>
			<label>Motivo reclamación:<input id="motivoFormReclama" type="text" name="motivo" /></label>
			<label>Fecha del hecho:<input id="fechaFormReclama" type="text" name="fecha" /></label>
			<label><input id="botonEnvio2" type="submit" value="Enviar"></label>
		</form>
	</body>
</html>

Saludos.

Ogramar · « **Respuesta #1 en:** 20 de Enero 2016, 17:18 »

Buenas Pedro lo veo bien resuelto y preciso, buen código desde mi punto de vista.

Salu2

pedro,, · « **Respuesta #2 en:** 20 de Enero 2016, 21:27 »

Gracias por la corrección Ogramar.

Saludos.

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

Noticias:

Autor Tema: JavaScript modificar y conocer atributos setAttribute y getAttribute CU01176E# (Leído 3659 veces)

pedro,,

JavaScript modificar y conocer atributos setAttribute y getAttribute CU01176E#

Ogramar

Re:JavaScript modificar y conocer atributos setAttribute y getAttribute CU01176E

pedro,,

Re:JavaScript modificar y conocer atributos setAttribute y getAttribute CU01176E

Preguntas y respuestas

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

Noticias:

Autor Tema: JavaScript modificar y conocer atributos setAttribute y getAttribute CU01176E# (Leído 3659 veces)

pedro,,

JavaScript modificar y conocer atributos setAttribute y getAttribute CU01176E#

Ogramar

Re:JavaScript modificar y conocer atributos setAttribute y getAttribute CU01176E

pedro,,

Re:JavaScript modificar y conocer atributos setAttribute y getAttribute CU01176E

Preguntas y respuestas

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