Modifier l'événement onClick même avec FAQ

Version imprimable

Bonjour tout le monde,

Voilà un bon petit moment que je cherche un moyen compatible de modifier l'événement onClick d'un input en javascript

J'ai suivi l'exemple de la FAQ, mais cela ne marche pas dans mon cas, alors j'appelle au secours

Dans un 1er temps, je suis passé par un setAttribute('onClick', mafonction)
Ceci fonctionne très bien sur firefox, mais génère une erreur sur IE

Code:

Cet objet ne gère pas cette propriété ou cette méthode

J'ai donc essayé d'acceder directement à l'objet onclick comme expliqué dans la FAQ.
Cela ne marchait pas, alors j'ai directement copier l'exemple de la FAQ dans mon code.

Code:

aInputs[j].onclick=function(){alert(blabla)};

Voici mon code, en fait, je cherche tous les inputs text compris dans une ligne de tableau, et je souhaite modifier leur événement onClick

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
    aTds=aTable[0].getElementsByTagName('td');
    for (var i=0; i<aTds.length;i++)
    {
        var strNewIdOnGoing=""
        var aInputs=aTds[i].getElementsByTagName('input');
        if(aInputs.length>0)
        {
            for(var j=0; j<aInputs.length;j++)
            {
                if(aInputs[j].type=='text')
                {		
                    if(intRowCounter==0)
                        strInputIdCreatedByDefault=aInputs[j].getAttribute('id');
                    //alert(strIdOnGoing);
                    strNewIdOnGoing=strInputIdCreatedByDefault + '_' +  intRowCounter
                    aInputs[j].setAttribute('id', strNewIdOnGoing)
                }
 
                if(aInputs[j].type=='button')
                {
                    strOnClick = aInputs[j].getAttribute('onClick');
                    //alert(strInputIdCreatedByDefault + ' ||||| ' + strNewIdOnGoing);
                    //Sous mozilla, ça fonctionne bien avec setAttribute
                    // si on fait .onclick, le onclick du dom est modifié, mais quand on affiche le source on voit qu'il n'y est pas
                    // Sous IE , setAttribute et onclick génèrent une erreur
                    strOnClick = strOnClick.replace(strInputIdCreatedByDefault,strNewIdOnGoing);
                    //aInputs[j].setAttribute('onclick', strOnClick);
					//La ligne ci dessous ne fait rien sous firefox, et génère une erreur sous IE
                    aInputs[j].onclick=function(){alert(blabla)};
                }    
            }
        }
    }

Auriez-vous une idée ?

Merci bien !

@+.

26/09/2007, 21h46
Auteur
bonjour,

les méthodes setAttribute et getAttribute ne sont pas gérées par IE.

pour donner une valeur à un attribut :
Code:

1 2 aInputs[j].setAttribute('id', strNewIdOnGoing)
devient :
Code:

1 2 aInputs[j].id = strNewIdOnGoing
pour lire un attribut :
Code:

1 2 strNewIdOnGoing = aInputs[j].getAttribute('id')
devient :
Code:

1 2 strNewIdOnGoing = aInputs[j].id;
26/09/2007, 22h07
schnito
merci pour ta réponse !

Apparement, pour l'id, je peux faire un setAttribute ou getAttribute ca semble fonctionner.
Mais je ne les utilise plus car j'ai vu qu'il y avait des problèmes

Mon cas sous IE, en passant directement par les objets :

si je fais
Code:

1 2 aInputs[j].id = strNewIdOnGoing
Cela fonctionne

mais si je veux modifier un événement, ici le onClick, et que je fais
Code:

1 2 aInputs[j].onclick=function(){alert(blabla)};
J'ai l'erreur suivante :
Code:

1 2 Cet objet ne gère pas cette propriété ou cette méthode

en reprenant cet exemple :
http://javascript.developpez.com/faq...lick.dynamique
je n'ai pas de souci, ni avec IE ni avec FF.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function clicBouton()
{
 var tabInput = document.getElementsByTagName("input");
 var i, n;
 
 n = tabInput.length;
 for (i=0; i<n; i++)
 {
    if (tabInput[i].type.toLowerCase()=="button")
    {
       tabInput[i].i = i;
       tabInput[i].onclick = function(){alert("coucou "+this.i);}
    }
 }
}
 
//-->
</script>
 
</head>
 
<body onload="clicBouton()">
<input type="text" value="texte"  size="20" maxlength="10" />
<input type="text" value="texte"  size="20" maxlength="10" />
<input type="text" value="texte"  size="20" maxlength="10" />
 
 
<input type="button" value="Bouton" />
<input type="button" value="Bouton" />
<input type="button" value="Bouton" />
<input type="button" value="Bouton" />
<input type="button" value="Bouton" />
 
 
 
</body>
 
</html>

[edit]

Code:

1
2
 
aInputs[j].onclick=function(){alert(blabla)};

:fleche: tu as oublié de mettre blabla entre guillemets :aie:

Code:

1
2
 
aInputs[j].onclick=function(){alert("blabla")};

[/edit]

27/09/2007, 10h00
schnito

oh :oops:

bon effectivement j'avais oublié les guillemets

donc maintenant

ceci

Code:

aInputs[j].onclick=function(){alert("blabla")};

fonctionne sous firefox

Sous IE j'ai toujours le même problème ...

je comprends pas là
27/09/2007, 10h17
schnito

effectivement, le code que tu me donnes dans ton post plus haut fonctionne très bien sous IE

mais pas le mien ... qu'est-ce qui diffère ?

Dans ton code, les input n'ont pas d'attributs onclick lorsque que tu les set, donc en fait tu les créer.

Dans mon cas, les attributs onclick existent déjà, mais je souhaite les modifier

cela fait peut-être toute la différence ...
27/09/2007, 12h45
schnito
bon, alors je n'ai plus d'erreur

Le problème venait en fait du replace, mais IE ne me donnait pas la bonne ligne le gros malin

Donc il fallait que je fasse :
Code:

1 2 3 4 strOnClick = aInputs[j].getAttribute('onClick'); strOnClick1 = new String (strOnClick); strOnClick1 = strOnClick1.replace(strInputIdCreatedByDefault,strNewIdOnGoing);
et là ca marche

par contre, si je fais
Code:

1 2 aInputs[j].onclick= function(){strOnClick1;};
si j'appuie sur le bouton, ça fait rien ... :cry:

mais bon j'ai plus d'erreur c déjà ça

il faut créer une fonction dynamiquement et y mettre le onclick actuel...

puis modifier le onclick :

Code:

1
2
3
4
 
myinput.onclick=function(){ fonctioneprecedente();
                                      //puis les nouvelles instructions
                                    }

une fonction n'est pas un string !

27/09/2007, 13h05
schnito
euh, j'ai pas bien compris ... :oops:

sous firefox par exemple

si je fais
Code:

1 2 aInputs[j].onclick= strOnClick1;
directement ça fonctionne ...

mais j'ai pas bien compris la fonction dynamique ...

merci de ton aide !

UN exemple vallant mieux que de longs exposés :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
 
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<script type="text/javascript"><!--
function addOnclick(id,func) {
	var myEl = document.getElementById(id);
	//if ( typeof myEl.onclick== 'function') {
	if ( myEl.onclick instanceof Object) {
		oldFunction = myEl.onclick;
 
		myEl.onclick = function() {
	       							func();
										oldFunction();
										}
	} 
	else {
			myEl.onclick = func();
		}
	}
 
//-->
 
function popme(myurl){
window.open(myurl)
}
 
</script>
	</head>
 
	<body onload="addOnclick('btn',function(){alert('ajout')})">
		<a href="#" id="btn" onclick="this.href='#';popme('http://www.google.com');return false;" ;>Button</a>
	</body>
 
</html>

au départ le lien ne fait qu'ouvrir google.
le script lui ajoute un alert ...

27/09/2007, 13h29
schnito
oui mais c pareil

ta fonction addOnclick(id,func), tu lui passe comme paramètre un alert(), donc déjà une fonction

moi je récuperer le onclick, je le modifie, et j'aimerais le repasser au onClick ... mais c une string

ça

Code:

aInputs[j].onclick= strOnClick1;

mozilla veut bien, pas IE

j'ai essayé avec un eval aussi
Code:

1 2 aInputs[j].onclick=function(){eval(strOnClick1);};
mozilla accepte, pas IE ...

je ne suis pas vraiment dans le cas de ton code ... ou alors j'ai mal compris ?

comme dit plus haut un evenement onclick attend une fonction pas un string ...

sinon il faudra créer la focntion dynamiquement à partir de ton string ...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script type='text/javascript'> var stringfunc = "alert('coucou')"; window['mafonction']=new function(){eval(stringfunc)} </script> </head> <body> <input type='button' onclick="mafonction()" value='go' /> </body> </html>

27/09/2007, 14h51
schnito
voilà, je pensais passer par un eval

le problème de faire ça
Code:

1 2 aInputs[j].onclick=new function(){eval(strOnClick1)};
C qu'il execute le truc directement, sans que je clique sur le input ...

arf suffit de virer le new ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<script type='text/javascript'>
var stringfunc = "alert('coucou')";
 
window['mafonction']= function(){eval(stringfunc)}
</script>
 
 
</head>
 
<body>
<input type='button' onclick="mafonction()" value='go' />
</body>

27/09/2007, 15h15
schnito
oui jm'en suis rendu compte

la méthode de ton dernier post est une méthode que j'ai décrite dans l'un de mes posts précédents

si je fais
Code:

1 2 aInputs[j].onclick=function(){eval(strOnClick1)};
ça marche très bien sous mozilla

mais sous IE ça fait rien ...

par contre ton exemple marche bien là ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type='text/javascript'>
 
var stringfunc = "alert('coucou')";
 
window['mafonction']= function(){eval(stringfunc)}
 
</script>
 
 
</head>
 
<body>
<input type='button' onclick="alert('hello')" value='go' />
</body>
<script type='text/javascript'>
document.getElementsByTagName('input')[0].onclick=function(){mafonction();}
</script>
 
</html>

ce que tu peux faire : créer dynamiquement ta fonction avec l'objet Function() (à ne pas confondre avec function()). Cela demande néanmoins un peu de pratique :aie:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body> <input type="button" value="Bouton" onclick="alert('1ère fonction : bouton 1')"/> <input type="button" value="Bouton" onclick="alert('1ère fonction : bouton 2')"/> <br><br><br> <input type="button" value="Changer les fonctions" onclick="clicBouton()"/> </body> </html>
Instructions est une fonction qui retourne une chaine de caractères qui contient le code d'une fonction. Le but est d'ajouter 100 à la valeur u transmise en paramètre et d'afficher le résultat.

Dans la fonction clicBouton à chaque tour de boucle, je crée un objet Function qui prend 2 paramètres : la liste des arguments et le code. Dans mon exemple, l'objet n'a pas d'arguments d'où l'écriture :
Code:

1 2 Fct = new Function("",codeFct);
Puis comme dans la FAQ, je considère Fct comme une variable :
Code:

1 2 3 tabInput[i].Fonction = Fct; tabInput[i].onclick = function(){this.Fonction()};
Lors du chargement de la page, si tu cliques sur les boutons "bouton" tu auras les messages suivants :
1ère fonction : bouton 1 sur le 1er bouton
1ère fonction : bouton 2 sur le second bouton

puis en cliquant sur "Changer les fonctions", tu modifies l'événement onclick sur les 3 boutons. En cliquant sur chacun des 3 boutons, tu auras ces 3 messages :
100 sur le 1er bouton (100+0)
101 sur le 2nd bouton (100+1)
102 sur le 3ème bouton (100+2)
Tu as bien fait la somme de i et 100 ;)

28/09/2007, 10h10
schnito
merci les gars je vais essayer vos méthodes ...

un truc étrange sinon encore

sous IE, si je fais ça
Code:

1 2 3 strOnClick1 = "alert('blabla')" aInputs[j].onclick=function(){eval(strOnClick1)};
ça marche

alors pourquoi ça marche pas avec le vrai strOnClick1 ... bizarre

au départ, dan smon template, je charge le input de cette façon
Code:

1 2 3 4 5 6 7 8 9 <input type="button" class="searchButton" value="Browse..." onClick="" i18n:attributes="value label_browse;" tal:attributes=" onclick string:javascript:wsreferencebrowser_openBrowser('${startup_directory}','${column}_${fieldId}', '${at_url}', '${fieldRealName}', '${at_wsRelativePath}')"
Dans mon JS ensuite, je get le onclick, et je veux juste changer le 2ième paramètre de la méthode wsreferencebrowser_openBrowser(), et repasser le résultat au onclick.

Sous IE, le get du onClick me donne
Code:

1 2 3 4 5 function anonymous() { wsreferencebrowser_openBrowser(... }
c pas étrange ce function anonymous() ??

28/09/2007, 11h12
schnito
Voilà, ça marche

Alors, je vais expliquer ce que j'ai fait

comme je le dis dans mon post ci dessus, je charge le onclick de mon inout dans mon template normallement en faisant onclick = "javascript:MaMethodeJavascript(...);"

Ensuite, dans mon code JS, je vais chercher ce onClick.

Juste après, je l'affiche.

Sous Firefox, l'alert commence par

Code:

javascript:MaMethodeJavascript(...);

==> Normal

Sous IE, l'alert commence par
Code:

1 2 3 4 5 function anonymous() { MaMethodeJavascript(...); }
Jme dis, tiens, c bizarre ça, qu'est ce que c que ce function anonymous() ?

Jme dis bon, jvais essayer d'avoir la même chaine que j'ai avec firefox, alors je supprime le function anonymous() et les accolades.

A la fin, je fais simplement un
Code:

1 2 aInputs[j].onclick = function(){eval(strOnClick1)};
Et ça marche !!!

Voilà, alors je comprends pas grand chose à ce comportement de IE

mais ça marche

si vous avez des explications par contre je suis preneur, avant de mettre le topic en résolu ...

Merci bien en tout cas ! ;)
28/09/2007, 12h09
Auteur
Citation:
Envoyé par schnito

Sous IE, l'alert commence par

Code:

1 2 3 4 5 function anonymous() { MaMethodeJavascript(...); }

Jme dis, tiens, c bizarre ça, qu'est ce que c que ce function anonymous() ?

Jme dis bon, jvais essayer d'avoir la même chaine que j'ai avec firefox, alors je supprime le function anonymous() et les accolades.
visiblement c'te fonction anonymous t'a bien ému :mrgreen:

Deux liens pour t'aider à y voir plus clair :
http://developer.mozilla.org/fr/docs...n_de_fonctions
http://novemberborn.net/sifr/explained/terminology
28/09/2007, 12h52
schnito
merci pour tes liens, je vais y jeter un œil

mais je comprends pas

Ma fonction wsreferencebrowser_openBrowser() que je set a mon input dans mon template n'est pas déclarée de façon anonyme ...

Voici sa déclaration
Code:

1 2 3 function wsreferencebrowser_openBrowser(path, fieldName, at_url, fieldRealName, at_wsRelativePath) {
C'est IE qui ajoute function() anonymous quand je vais chercher la valeur de mon onClick ...