Pasar parámetros en manejador de eventos semántico

[gmonterog]

Hola a todos.

He estado consultando temas antiguos del foro para solucionar mi problema y algo no he debido entender porque mi código no funciona (no reporta error, simplemente no lanza la función).

Tengo este codigo javascript

Código Javascript:

//función que muestra capa oculta   
function mostrarOverlay(myID){
        document.getElementById("myID").style.display='block';
        }
//función que oculta capa visible
function ocultarOverlay(myID){
    document.getElementById("myID").style.display='none';
    }
 
window.onload = function() {
    document.getElementById("despliega1").onclick=function(e) {mostrarOverlay('overlay1');};
    document.getElementById("cerrar").onclick=function(e) {ocultarOverlay('overlay1');};
    }
 

Dentro de mi HTML tengo

Código HTML:

<div class="cajaInicio">
    <a href="medicinaEstetica.html"><h1>Medicina estética</h1></a>
    <div class="interior">
        <img id="" alt="" src="img/medicinaEstetica.jpg">
    </div>
    <div class="persiana" id="despliega1"><p>Descubre qué nos hace ser los mejores.</p></div>
</div>
 
y un poco más adelante...
 
<div class="overlay" id="overlay1">
    <div class="transparencia"></div>
    <div class="interiorOverlay">
        <img id="cerrar" style="width:30px; heigth:auto;" alt="" src="img/cerrar.jpg">
        <a href="medicinaEstetica.html"><h2>¡La mejor medicina estética!</h2></a>
        <h3>Utilizamos <em>los mejores productos</em> del mercado y  los métodos más eficaces de rejuvenecimiento.</h3>
        <h3>Tenemos <em>los precios más ajustados</em> del mercado.</h3>
        <h3>Te quedarás muy satisfecho con el <em>servicio</em> recibido.</h3>
    </div>
</div> <!-- fin de overlay1 -->
 

que son el elemento que lanza la función y sobre el que actua la función. Lógicamente tengo muchos del mismo tipo con diferentes id: despliega1, despliega2... y overlay1, overlay2...

Si no he entendido mal, se trata de pasar mis funciones con los parámetros que necesite (los que admita la fución, lógicamente) a través de una función generica, en este caso function(e). El concepto creo haberlo entendido pero debo tener algún error de sintaxis o algo porque no me funciona.

Además tengo una duda de concepto, cuando paso la función genérica function(e), el parámetro (e) ¿que representa?.

Ruego me prestéis vuestra ayuda.

Saludos y gracias por anticipado.

GMG.

[ipraetoriux]

..haber si puedo orientar un poco, tratare de explicartelo facil y corto...

..en Javascript puedes declarar funciones de varias formas

Código Javascript:

function ALGO(){
 bla bla bla
}
 
var ALGO = function(){
  bla bla bla
};
 
var ALGO = new Function ([arg1[, arg2[, ... argN]],] bla bla bla);
 
(function(){
bla bla bla
})();
 

dependiendo situaciones deberas declarar las funciones de una u otra forma...pero la forma normal de hacerlo es

Código Javascript:

function ALGO(){
 bla bla bla
}
 
var ALGO = function(){
  bla bla bla
};
 

..ahora bien...que diferencia tienes estas dos declaraciones???....la primera declara la funcion ALGO...en cambio la segunda, almacena una funcion en una variable...la funcion que esta declarada en una variable se llama funcion anonima...es decir

Código Javascript:

var ALGO = function(){
  bla bla bla
};
 

que funciona o se utiliza de igual forma que la declarion normal de funciones, salvo situaciones particualres....

..las funciones pueden o tener parametros es decir...que representan los valores que le envias a la funcion...o sea

Código Javascript:

var ALGO = function(PARAMENTRO){
 
};
 

en parametros puede representar un string, un numero, un valor booleano, un array u otra funcion...

...no existe la funcion generica que tu dices

Código Javascript:

function(e){
 
};
 

esto es solo una funcion anonima que presenta un parametro "e"...que puede llamarse z, y, pepito, juan, nombre, etc...y tomara el valor que le envie el call de la funcion...

que es el call o llamado de la funcion?...es la invocacion de la funcion, que puede presentar o no argumentos que se enviaran a la funcion...

Código Javascript:

var ALGO = function(e){
   alert(e); 
};
 
ALGO('juan');
 

..'juan' representa el argumento que la funcion recibe como parametro. O sea en la funcion, el parametro "e" tiene el valor "juan"...

espero haberte ayudado

[IsaBelM]

el problema lo tienes aquí

function mostrarOverlay(myID){
document.getElementById("myID").style.display='block';

quitale las comillas. el elemento "myID" no existe. en la otra función haz lo mismo

el parámetro "e" no representa a nada, quitalo

[gmonterog]

Gracias IsaBelM. Clara, concisa y efectiva.

Asunto cerrado.

Iniciado por IsaBelM

el problema lo tienes aquí

quitale las comillas. el elemento "myID" no existe. en la otra función haz lo mismo

el parámetro "e" no representa a nada, quitalo

[furoya]

(ipraetoriux : a mí me lo hace todo el tiempo...)

gmonterog : lo de las comillas era evidente. Eso pasa cuando copias y pegas sin entender. Seguramente lo que sobra era parte del código original, donde tenía alguna utilidad. Porque no veo la necesidad de pasar el evento del click por función y en el onload. Tampoco de hacer dos funciones distintas para mostrar y ocultar. No sé dónde lo encontraste, pero te aseguro que por acá hay mejores.

IsaBelM : ... esteee ... ¡Hola!

[gmonterog]

Hola furoya:

Efectivamente podía haber hecho una sola función mostrarOcultar.

Es evidente que precisamente de javascript, pues no se mucho. Que digo, no se nada por lo que voy probando cosas, poco a poco. Seguramente con mas error que acierto, pero bueno, como se dice por aquí; nadie nace aprendido.

El motivo de pasar el onclick de este modo y de hacerlo en el onload lo tome de aquí (al final de la página): http://www.librosweb.es/javascript/c..._eventos1.html
Tal vez no entendí bien lo leído, pero me pareció el método recomendado por el autor por la "limpieza" que aporta al código HTML. Seguro que hay muy diferentes opiniones a este respecto. ¿Cual es la tuya?

En cualquier caso siempre os estoy agradecido a todos los que os tomáis la molestia de leer mis dudas y contestarlas y/o comentarlas.

Un saludo,

GMG

[furoya]

Ah, bueno, si es por limpieza de código, se puede poner una etiqueta <body> seguida de su cierre </body> y rellenar todo con un escript.

Ahora en serio, no sé que dice el enlace, no lo voy a ver ahora, pero ya hablamos sobre funciones eficientes que cambian entre uno y otro formatos o contenidos o...

Cambiar texto alternativamente de un <span>

De cualquier forma, y volviendo al ejemplo de la pregunta, me parece que la (e) tenía que ver con el evento, o quizá el error. Me parece que funciona en IE, pero ya no me acuerdo.

Ufa! Ahora me dio curiosidad, y voy a mirar esa página


· · ·


Mmmm. No, no decía para qué era la (e). Tendría que buscar más.
Lo que sí vi es que son códigos experimentales, didácticos, para hacer pruebas. Hay que estudiar cada caso para saber dónde se pueden meter en una página real.
Y yo entendí que querías usarlo en un documento, no que estabas destripando código.

Así es otra cosa.

[Panino5001]

En efecto, la e es una referencia a event y suele usarse para lo que a alguien se le ocurrió llamar delegación de eventos :

Código PHP:

  <!DOCTYPE htm>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
onload=function(){
    document.getElementById('alfa').onclick=function(e){
        var evt=e || event, obj=evt.target || evt.srcElement;
        alert(obj.innerHTML);        
    }
}
</script>
</head>
 
<body>
<ul id="alfa">
    <li>bravo</li>
    <li>charlie</li>
    <li>delta</li>
</ul>
</body>
</html>