pasar parametros a funcion onclick

elburdel · #1 (**permalink**) 15/03/2012, 23:37

Hola tengo el siguiente problema
Tengo una lista de catalogos que lo recorro con un for, y luego le creo un enlace y le digo que si id va a ser igual al valor de ciclo en ese momento.

Código PHP:

  var a = document.createElement('a');

    a.innerHTML = 'Agregar al carrito de compras !';

    a.id=i;

    a.onclick = agregar_carrito(a.id);

Código PHP:

  function agregar_carrito(pos_cd) {

alert(pos_cd);

}

El problema es que la funcion se ejecuta al cargar la página y no cuando hago onclick.
Cual es el problema? Como se pasan los parametros? Porque sino le paso los parametros no me ocurre este problema,pero necesito pasarle parametros para resolver este problema.

Leí algo de window.open, srcElement, pero muy bien no lo entendi, y lo que probe no me funciono.

Espero que me puedan ayudar.

Panino5001 · #2 (**permalink**) 16/03/2012, 01:17

Cuando se asignan los eventos de esta manera:

Código PHP:

  a.onclick=...

El intérprete espera una referencia a la función a ejecutar cuando se produzca el evento. Esa referencia puede ser el nombre de una función sin paréntesis o puede ser una función anónima.
Nombre de función sin paréntesis:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function agregar_carrito() {
        alert(this.id);
 /*en este caso lo tenemos fácil porque el valor que queremos
 referenciar dentro del handler es una propiedad del objeto 'a' y entonces podemos usar this;
en otros casos en que necesitemos variables que no pertenezcan al
objeto deberemos buscarnos la vida con namespaces o registrys o usar  variables globales
*/
}
onload=function(){
var a = document.createElement('a'); 
    a.innerHTML = 'Agregar al carrito de compras !'; 
    a.id='ppp'; 
    a.onclick = agregar_carrito;
    document.body.appendChild(a);
}
</script>

</head>

<body>
</body>
</html>

Función anónima:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function agregar_carrito(pos_cd) {
        alert(pos_cd); 
}
onload=function(){
var a = document.createElement('a'); 
    a.innerHTML = 'Agregar al carrito de compras !'; 
    a.id='ppp'; 
    a.onclick = function(){agregar_carrito(a.id);}
    document.body.appendChild(a);
}
</script>

</head>

<body>
</body>
</html>

También podemos usar funciones con paréntesis y argumentos, pero puede resultar un poco menos comprensible:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function agregar_carrito(pos_cd) {
//notar que en realidad retornamos una función anónima:
    return function(){
        alert(pos_cd); 
    }
}
onload=function(){
var a = document.createElement('a'); 
    a.innerHTML = 'Agregar al carrito de compras !'; 
    a.id='ppp'; 
    a.onclick = agregar_carrito(a.id);
    document.body.appendChild(a);
}
</script>

</head>

<body>
</body>
</html>

elburdel · #3 (**permalink**) 16/03/2012, 07:45

Me funciono perfectamente

Ahora, existe alguna forma de hacer esto?

como bien hice

this.id;

hacer this.variable ?

Porque estoy haciendo un carrito de compras, y para agregarlo al carrito de compras necesito saber que estoy selecciondo, lo averigue con el this.id; pero ahora le tengo que pasar los datos del producto seleccionado.

Pense en averiguarlo con this.i[3]; //POsicion del array donde guardo el precio.

Pero no me funciono

También pense en como le dije que a.id = i;
Decirle que this.id[3];

Pero tampoco funciono!

Disculpas x las molestias ocasionadas

Saludos!

Panino5001 · #4 (**permalink**) 18/03/2012, 09:58

Quizá estos ejemplos te den una idea.
Este está basado en la última opción que te comenté:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

<script type="text/javascript">

function agregar_carrito(el) {

//notar que en realidad retornamos una función anónima:

    return function(){

        //acá, en lugar del alert, lo que necesites

        alert(el['nombre']+' '+el['color']+'-->'+el['precio']); 

        return false;

    }

}

function setItems(){

    var items=[{nombre:'mochila',precio:2.5,color:'verde'},{nombre:'cuaderno',precio:0.5,color:'azul'},{nombre:'lápiz',precio:.1,color:'negro'}],i=0,l=items.length,a;

    for(;i<l;i++){

        a = document.createElement('a');

        a.href='#';

        a.innerHTML = items[i]['nombre']+' '+items[i]['color']+'-->'+items[i]['precio']; 

        (function(el){a.onclick = agregar_carrito(el);})(items[i]);

        document.body.appendChild(a);

        document.body.appendChild(document.createElement('br'));

    }

}

onload=setItems;

</script>

 
</head>

 
<body>

</body>

</html>

Este, en cambio, es más parecido a lo que solicitaste en tu último post. Está basado en los setters y getters de atributos. Consiste en añadir atributos customizados a elementos html. Durante mucho tiempo fue considerado una mala práctica y en algunos navegadores, si se usaba mal, podía traer problemas de memoria. Pero en html 5, pueden añadirse atributos data, así que
"Viva la fiesta
Viva la noche
...
Johnny, la gente está muy loca
...
"

:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

<script type="text/javascript">

function agregar_carrito() {

    /*

    ver en html 5:

    this.dataset.nombre,this.dataset.color y this.dataset.precio

    */

        alert(this.getAttribute('data-nombre')+' '+this.getAttribute('data-color')+'-->'+this.getAttribute('data-precio'));

        return false;

}

function setItems(){

    var items=[{nombre:'mochila',precio:2.5,color:'verde'},{nombre:'cuaderno',precio:0.5,color:'azul'},{nombre:'lápiz',precio:.1,color:'negro'}],i=0,l=items.length,a;

    for(;i<l;i++){

        a = document.createElement('a');

        a.href='#';

        a.innerHTML = items[i]['nombre']+' '+items[i]['color']+'-->'+items[i]['precio']; 

        a.setAttribute('data-nombre',items[i]['nombre']);

        a.setAttribute('data-color',items[i]['color']);

        a.setAttribute('data-precio',items[i]['precio']);

        a.onclick = agregar_carrito;

        document.body.appendChild(a);

        document.body.appendChild(document.createElement('br'));

    }

}

onload=setItems;

</script>

 
</head>

 
<body>

</body>

</html>