Autor Tema: JavaScript métodos setAttribute y getAttribute modificar atributos HTML CU01176E (Leído 2850 veces)

bermartinv · « **en:** 15 de Marzo 2016, 13:20 »

Hola chicos, adjunto código para el ejercicio de este tema CU01176E del tutorial básico de programación web JavaScript desde cero.

Citar

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>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

<style type="text/css">
    label{
        display:block;
        margin:5px;
    }
    
    #ejemplo {
        width: 300px;
        height: 30px;
        background-color:bisque;
        border-radius:10px;
        border : solid 2px black;
        box-shadow: 10px 5px 3px;
        position: absolute;
        left: 400px;
        cursor: pointer;
        text-align:center;
        line-height: 30px;
        
    }
    
    </style>

<script>
var formulario = document.forms;
    
window.onload = function (){
    
    var boton = document.getElementById('ejemplo');
    
    boton.addEventListener('click',manejo);

}

function manejo(){
    
        asignarmaxLength();
    
        mostrarmaxLength();
        
}
        
 function asignarmaxLength(){      
        
        for (var i = 0;i<formulario.length;i++){
            
                for (var j=0;j<formulario[i].elements.length;j++){
                   
                    if (formulario[i].elements[j].type=='text'){
                        
                        formulario[i].elements[j].setAttribute ('maxlength',8); 
                    }
                   
                }
            
        }
       
    }
    
    function mostrarmaxLength(){
        
        msg = 'Hay '+formulario.length+' formularios';
        
        for (var i = 0;i<formulario.length;i++){
            
            msg += '\n El formulario '+(i+1)+' tiene los siguientes elementos: ';
            
            for (var j=0;j<formulario[i].elements.length;j++){
                
                if (formulario[i].elements[j].type == 'text'){
                    
                msg += '\n Elemento input de tipo '+formulario[i].elements[j].type+' con name '+formulario[i].elements[j].name+' su id es '+formulario[i].elements[j].id+' y su maxlength es de '+formulario[i].elements[j].maxLength+' caracteres';
                    
                    // en caso de uso de getAttribute seria: 
                    // formulario[i].elements[j].getAttribute('maxlength');
                }else{
                    
                msg += '\n Elemento input de tipo '+formulario[i].elements[j].type+' su id es '+formulario[i].elements[j].id+' y no tiene definido el atributo 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"> setAttribute/getAttribute con maxLength</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

Mario R. Rancel · « **Respuesta #1 en:** 17 de Marzo 2016, 14:47 »

Buenas tardes, todo bien

Como indicas en el comentario para recuperar el valor del atributo usando getAttribute se haría así (solo indico la línea implicada):

Código: [Seleccionar]

msg += '\n Elemento input de tipo '+formulario[i].elements[j].type+' con name '+formulario[i].elements[j].name+' su id es '+formulario[i].elements[j].id+' y su maxlength es de '+formulario[i].elements[j].getAttribute('maxlength')+' caracteres';

Saludos

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

Noticias:

Autor Tema: JavaScript métodos setAttribute y getAttribute modificar atributos HTML CU01176E (Leído 2850 veces)

bermartinv

JavaScript métodos setAttribute y getAttribute modificar atributos HTML CU01176E

Mario R. Rancel

Re:JavaScript métodos setAttribute y getAttribute modificar atributos HTML CU01176E

Preguntas y respuestas

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

Noticias:

Autor Tema: JavaScript métodos setAttribute y getAttribute modificar atributos HTML CU01176E (Leído 2850 veces)

bermartinv

JavaScript métodos setAttribute y getAttribute modificar atributos HTML CU01176E

Mario R. Rancel

Re:JavaScript métodos setAttribute y getAttribute modificar atributos HTML CU01176E

Preguntas y respuestas

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