Comunidad de diseño web y desarrollo en internet online

Asignar atributo "onclick" con javascript? (IE)

Citar            
MensajeEscrito el 24 Sep 2007 09:01 pm
Hola.
Les cuento la siguiente situación.
Tengo una imágen que, mediante el evento onclick llamo a una función en javascript que lo que hace, entre otras cosas, es alterar la misma imagen, tanto el src, como alt y el mismo evento onclick.
En FF funciona todo bien, pero en IE lo que ocurre es lo siguiente:
Me toma bien el cambio de los atributos src y alt, y checkeando también me toma el cambio del evento onclick, sin embargo cuando vuelvo a clickear sobre la imagen no ocurre nada, no llama a la nueva función, es como si no tomara el nuevo evento onclick.
Es raro de explicar, espero que me hayan entendido.
Les dejo el código que estoy haciendo
HTML

Código :

<img src="add.gif" onclick="javascript:addMail(this,'ariel(at)hotmail.com')" alt="Agregar" />


JS

Código :

function addMail(obj, val){
   var cuentas = document.form_mensaje.cuentas_mail;
   obj.alt = "Remover";
   obj.src = "remove.gif";
   obj.removeAttribute("onclick");
   obj.setAttribute("onclick", "javascript:removeMail(this,'"+val+"')");
   /* también probe con la siguiente linea pero sucede lo mismo */
   obj.attributes["onclick"].value = "javascript:removeMail(this,'"+val+"')";
   if(cuentas.value == ""){
      cuentas.value = val;
   } else {
      cuentas.value = cuentas.value+', '+val;
   }
   alert(obj.getAttribute("onclick")); // aca, efectivamente, me devuelve el "onclick" que le asigne en la función
   return;
}

function removeMail(obj, val){
   alert(obj); // no imprime este alert, por lo que ni siquiera entró a la función
   var cuentas = document.form_mensaje.cuentas_mail;
   obj.alt = "Agregar";
   obj.src = "add.gif";
   obj.removeAttribute("onclick");
   obj.setAttribute("onclick", "javascript:addMail(this,'"+val+"');");
   
   cuentas.value = cuentas.value.replace(", "+val, "");
   cuentas.value = cuentas.value.replace(val, "");
   
   if(cuentas.value.substring(0,2) == ", "){
      cuentas.value = cuentas.value.substring(2, cuentas.value.length);
   }
   return;
}


Agradezco cualquier ayuda o sugerencia.
Saludos

Por PabloHdS

251 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Sep 2007 11:41 pm

Por PabloHdS

251 de clabLevel



 

firefox
Citar            
MensajeEscrito el 25 Sep 2007 03:44 am
Hola PabloHdS. Te comento que el metodo que usas para colocar los onclicks es intrusivo, y por lo tanto, poco accesible.
Te recomiendo que programes tu javaScript de manera no intrusiva. Ya sea con DOM clasico:

Código :

window.onload= function(){
 var objeto= document.getElementById("id");
 objeto.onclick= function(){
  //Do stuff
 }
}

o con un framework (en este caso jQuery)

Código :

$(document).ready( function(){
  $("#id").click( function(){
    //Do stuff
  });
});

Nota que los frameworks traen mucha compatibilidad entre navegadores, con lo que minimizas problemas ;)

Por Lunatic Lycanthrop

Claber

1203 de clabLevel

7 tutoriales

1 ejemplo

Genero:Masculino  

The dark places where wolves access internet with 46,6 kbps

firefox
Citar            
MensajeEscrito el 25 Sep 2007 01:31 pm
Bueno, gracias Count Gallant Bhas Tard I.
Basandome en tu sugerencia encontre una solución temporal, pero no es 100% lo que busco.
Paso a comentar:
Utilizando jQuery, lo primero que hice fue esto

Código :

$(document).ready(function(){
   $(".image_add").click( function (){
      if(this.className == "image_add"){
         this.alt = "rem";
         this.src = "remove.gif";
         this.className = "image_remove";
   $(".image_remove").click( function (){
         this.alt = "add";
         this.src = "add.gif";
         this.className = "image_add";
      }
   });
});

Código :

<img src="add.gif" class="image_add" alt="Agregar" />

De esa forma tampoco me tomaba el segundo click, ni siquiera en Firefox, por lo que recurri a lo siguiente

Código :

$(document).ready(function(){
   $(".image_add, .image_remove").click( function (){
      if(this.className == "image_add"){
         this.alt = "rem";
         this.src = "remove.gif";
         this.className = "image_remove";
      } else {
         this.alt = "add";
         this.src = "add.gif";
         this.className = "image_add";
      }
   });
});

Código :

<img src="add.gif" class="image_add" alt="Agregar" />

Y de esa manera funciona el cambio de imagen una y otra vez, aunque no se si esa forma es la adecuada totalmente.

Ahora bien, la función de clickear no solo la pretendo usar para cambiar los atributos de la misma imagen, sino que también mediante el click, necesito alterar el valor de un textarea de un formulario.
Originalmente, a la función le pasaba un parametro con el valor a insertar o a borrar del textarea, pero con el código reciente no se como le puedo pasar ese parámetro, por lo que la manera medio truncada de lograrlo fue agregar el valor al atributo alt. Asi:

Código :

$(document).ready(function(){
   var cuentas = document.form_mensaje.cuentas_mail;
   $(".image_add, .image_remove").click( function (){
      var val = this.alt.substring(4, this.alt.length);
      if(this.className == "image_add"){
         this.alt = "rem "+val;
         this.src = "remove.gif";
         this.className = "image_remove";
         if(cuentas.value == ""){
            cuentas.value = val;
         } else {
            cuentas.value = cuentas.value+', '+val;
         }
      } else {
         this.alt = "add "+val;
         this.src = "add.gif";
         this.className = "image_add";
         cuentas.value = cuentas.value.replace(", "+val, "");
         cuentas.value = cuentas.value.replace(val, "");
         
         if(cuentas.value.substring(0,2) == ", "){
            cuentas.value = cuentas.value.substring(2, cuentas.value.length);
         }
      }
   });
});

Código :

<img src="add.gif" class="image_add" alt="add valor" />

Con este código logro hacer lo que necesito, sin embargo eso de pasarle el valor por el atributo alt no me resulta lo mejor, supongo que debe existir una manera de pasarlo como parámetro.

Saludos

Por PabloHdS

251 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Sep 2007 04:52 am

Código :

$(".image_add").click( function (){
      if(this.className == "image_add"){

¿Qué esto no está de más? Digo si estas cogiendo los elementos con clase image_add, ¿Para qué revisar otra vez si la tiene?

Por otro lado, creo que lo que quieres es usar el evento toggle. Busca en eventos.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 27 Sep 2007 11:53 am
Esa parte del código que puse no era asi, era sin el IF. Pasa que fui haciendo copy & paste del código que funcionaba y para poder comentar como fue mi "paso a paso" iba borrando partes. Se ve que ahi se me paso borrar esa línea. El código que deje funcionando es el último que postee, donde tomo ".image_add" y ".image_remove".

Código :

$(".image_add, .image_remove").click( function (){


Voy a revisar el evento toggle, gracias.

Por PabloHdS

251 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.