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

**schnito** · 26/09/2007, 19h27

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

@+.

**Auteur** · 26/09/2007, 21h46

bonjour,

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

pour donner une valeur à un attribut :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

devient :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
aInputs[j].id = strNewIdOnGoing

pour lire un attribut :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

devient :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
strNewIdOnGoing = aInputs[j].id;

**schnito** · 26/09/2007, 22h07

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
aInputs[j].id = strNewIdOnGoing

Cela fonctionne

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

J'ai l'erreur suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Auteur** · 26/09/2007, 23h21

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javscript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

tu as oublié de mettre blabla entre guillemets

Code javscript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[/edit]

**schnito** · 27/09/2007, 10h00

oh

bon effectivement j'avais oublié les guillemets

donc maintenant

ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

fonctionne sous firefox

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

je comprends pas là

**schnito** · 27/09/2007, 10h17

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 ...

**schnito** · 27/09/2007, 12h45

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

si j'appuie sur le bouton, ça fait rien ...

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

**SpaceFrog** · 27/09/2007, 12h51

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

puis modifier le onclick :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

une fonction n'est pas un string !

**schnito** · 27/09/2007, 13h05

euh, j'ai pas bien compris ...

sous firefox par exemple

si je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
aInputs[j].onclick= strOnClick1;

directement ça fonctionne ...

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

merci de ton aide !

**SpaceFrog** · 27/09/2007, 13h16

UN exemple vallant mieux que de longs exposés :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

**schnito** · 27/09/2007, 13h29

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

aInputs[j].onclick= strOnClick1;

mozilla veut bien, pas IE

j'ai essayé avec un eval aussi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**SpaceFrog** · 27/09/2007, 13h47

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**schnito** · 27/09/2007, 14h51

voilà, je pensais passer par un eval

le problème de faire ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
aInputs[j].onclick=new function(){eval(strOnClick1)};

C qu'il execute le truc directement, sans que je clique sur le input ...

**SpaceFrog** · 27/09/2007, 15h02

arf suffit de virer le new ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**schnito** · 27/09/2007, 15h15

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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à ...

**SpaceFrog** · 27/09/2007, 15h26

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Auteur** · 27/09/2007, 19h38

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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">
<!--
 
function instructions(u)
{
 var code="";
 code  = "var j, m;";    //ne pas oublier le ; avant de fermer les guillemets
 code += "j=100;";
 code += "m = j+"+u+";";   //ce qui donne :  m=j+ le contenu de u
 code += "alert(m);";        //affichage de m, c est a dire la somme de j et u
 
 return code;
}
 
 
function clicBouton()
{
 var tabInput = document.getElementsByTagName("input");
 var i, n;
 
 var Fct, codeFct;
 
 n = tabInput.length;
 for (i=0; i<n; i++)
 {
    if (tabInput[i].type.toLowerCase()=="button")
    {
       codeFct = instructions(i);
       Fct = new Function("",codeFct);
       tabInput[i].Fct = Fct;
       tabInput[i].onclick = function(){this.Fct()};
    }
 }
}
 
//-->
</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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
 Fct = new Function("",codeFct);

Puis comme dans la FAQ, je considère Fct comme une variable :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**schnito** · 28/09/2007, 10h10

merci les gars je vais essayer vos méthodes ...

un truc étrange sinon encore

sous IE, si je fais ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ça marche

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

**schnito** · 28/09/2007, 10h32

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

c pas étrange ce function anonymous() ??

**schnito** · 28/09/2007, 11h12

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

javascript:MaMethodeJavascript(...);

==> Normal

Sous IE, l'alert commence par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

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

JavaScript

Discussions similaires

Partager

Partager