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, 18:07
-
Buenas tardes. Os dejo una posible solución del ejercicio CU01176E del curso JavaScript desde cero.
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.
Y el código modificado según los requisitos del ejercicio:
<!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">
var formularios;
window.onload = function(){
formularios = document.forms;
document.getElementById('ejemplo').addEventListener('click',comprobar);
}
function comprobar(){
var msg = '';
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'){
formularios[i].elements[j].setAttribute('maxlength',8);
msg = msg+'El elemento con id: '+formularios[i].elements[j].id+' tiene atributo maxlength modificado en: '+formularios[i].elements[j].getAttribute('maxlength')+'\n\n';
}
}
}
alert(msg);
}
</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>
<div id="ejemplo" style="color: blue; margin: 20px;">Pulsa aquí</div>
<form action="accion1.html" method="get" name="formularioContacto">
<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><input type="submit" value="Enviar" id="botonEnvio1"></label>
</form>
<form action="accion2.html" name="formularioReclamacion" method="get">
<h2>Formulario de reclamación</h2>
<label>Motivo reclamación:<input type="text" name="motivo" id="motivoFormReclama"></label>
<label>Fecha del hecho:<input type="text" name="fecha" id="fechaFormReclama"></label>
<label><input type="submit" value="Enviar" id="botonEnvio2"></label>
</form>
</body>
</html>
Gracias
-
Hola dimiste.
El ejercicio hace lo que pide el enunciado.
Por comentarte algo, se podría evitar el uso de de la variable formularios con ámbito global. Ya que en este caso no es algo que necesitemos como tal, habría que quitar estas dos líneas:
var formularios;y esta otra que está dentro de window.onload:
formularios = document.forms;
y añadiendo esta dentro de la función comprobar()
var formularios = document.forms;
Saludos.
;D
-
Buenas tardes, Pedro.
Gracias por el tiempo dedicado y por corregirme el ejercicio.
Tienes razón, código corregido.
Atentamente,
dimiste :)