Autor Tema: JavaScript cómo definir addEventListener con parámetros ejemplo código CU01177E (Leído 5417 veces)

bermartinv · « **en:** 17 de Marzo 2016, 13:21 »

Hola chicos, con este tema he aclarado muchas de las dudas que había tenido en ejercicios anteriores. Porque había intentando usar los eventos con la llamada a la función añadiendo parámetros a la función, de esta forma:

Código: [Seleccionar]

elementoHTML.addEventListener('click',cambiaColor(variable1,variable2))
....
....
....
function cambiaColor(evento,variable1,variable2){
....... }

y claro está, como se explica en el tema, me daba error. Yo pensaba que no se podría hacer, y me hacia pensar que era una cosa que le quitaba potencia a JavaScript. Pero con este tema todo ha quedado más claro.

Citar

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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        label {
            display:block;
            margin:10px;
        }
        
        input{
            margin-left:20px;
        }
    </style>
    <script>
    window.onload = function(){
        
        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)%3 == 0){
                    
                    formularios[i].elements[j].addEventListener('click',function(evento){cambiaColorFondo(evento,'lightgreen',this)});
                    
                     formularios[i].elements[j].addEventListener('blur',cambiaColorInicial);
                    
                }else if (formularios[i].elements[j].type == 'text' && (j+1 == 1) || (j+1)%3 == 1){
                    
                     formularios[i].elements[j].addEventListener('click',function(evento){cambiaColorFondo(evento,'yellow',this);});
                    
                    formularios[i].elements[j].addEventListener('blur',cambiaColorInicial);
                    
                }else{
                    
                     formularios[i].elements[j].addEventListener('click',function(evento){cambiaColorFondo(evento,'aquamarine',this);});
                    
                    formularios[i].elements[j].addEventListener('blur',cambiaColorInicial);
                    
                }
            }
            
        }
        
    }
    
    function cambiaColorFondo(evento,color,objeto){
        
        objeto.style.backgroundColor = color;
        
    }
    
    function cambiaColorInicial(evento){
        
        this.style.backgroundColor = 'white';
        
    }
        
    </script>
</head>
<body>
    <form name='formularioContaco' id='formulario' method='get' >
        <label>Nombre<input type='text' name='name' id='name'/></label>
        <label>Apellidos<input type='text' name='surname' id='surname'/></label>
        <label>Edad<input type='text' name='age' id='age'/></label>
        <label>Direccion de correo<input type='text' name='email' id='email'/></label>
        <label>Direccion<input type='text' name='adress' id='adress'/></label>
        <label>Profesion<input type='text' name='job' id='job'/></label>
        <label><input type='submit' id='botonEnvio' value='Enviar'/></label>
    </form>
</body>
</html>

Saludos

pedro,, · « **Respuesta #1 en:** 18 de Marzo 2016, 22:53 »

Hola bermartinv.

Veo el ejercicio muy bien resuelto.

Solo comentarte algo sobre la función cambiaColorFondo(evento,color,objeto), el parámetro que llamas objeto, en realidad es el elemento html en el cual ocurre el evento.

Saludos.

bermartinv · « **Respuesta #2 en:** 18 de Marzo 2016, 23:32 »

Gracias pedro,, ese nombre está mal asignado, no me salía ningún nombre para que fuera más clara la llamada a la función y al final elegí mal. Quería referirme al elemento html.

Gracias por echar un vistazo al código.

Saludos.

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

Noticias: