Discussion :

[guy777]

Bonjour à tous,

J'ai un probleme avec le DOM et surtout avec la propriété onclick.
Dans un javascript, je créée dynamiquement un tableau (avec le DOM). Dans chaque cellule, j'ai un chiffre que je rends cliquable comme ceci :

Code :

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

1
2
3
jour = document.createTextNode(numJour);
elementJour = document.createElement(\"span\");
elementJour.setAttribute("onClick", "choisiJour("+numJour+","+moisChoisi+","+anneeChoisie+")");

choisiJour est une fonction à laquelle je donne trois paramètres. Evidemment la dernière ligne ne fonctionne pas sous IE mais marche très bien avec Firefox.

Sous IE6, je dois mettre :

Code :

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

elementJour.onclick = choisiJour;

Probleme je ne peux pas lui passer de paramètres car si je fais :

Code :

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

elementJour.onclick = choisiJour(numJour, moisChoisi, anneeChoisie);

l'évènement n'est même pas géré, et retourne directement (sans le clic) la valeur calculée par choisiJour.

Il s'agit d'un calendrier, ou chaque jour doit être cliquable. Probleme, je ne peux pas cliquer sur les jours, il me retourne direct une valeur sauf si je met elementJour.onclick = choisiJour; mais je dois lui passer des paramètres...

Avez-vous une solution afin que je puisse passer mes paramètres à la fonction choisiJour ???

Merci d'avance
Guy777

[FremyCompany]

Regarde ca, a tout hasard :

Code :

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

elementJour.onclick = function{choisiJour(numJour, moisChoisi, anneeChoisie);}

Fremy

[guy777]

Non, çà marche pas, mais j'ai trouvé quelque chose qui marche pour mon cas, je doute que cela marche pour d'autres cas.

Plutot que de faire onclick=fonction

je fais onclick = function() { //definition fonction }

Et là je n'ai plus besoin de passer des paramètres, j'utilise les variables numJour, moisChoisi et anneeChoisie qui sont disponibles.

Force est de reconnaitre que les bugs d'IE ou son manque de logique dans l'interprétation du Javascript ne simplifie pas la tâche du développeur. Firefox est tout de même beaucoup plus intéressant...

Merci,
Guy777

[denisC]

Non, çà marche pas, mais j'ai trouvé quelque chose qui marche pour mon cas, je doute que cela marche pour d'autres cas.

Si, si, ça marche dans tous les cas, et c'est même comme ça qu'il faut faire. Une fois n'est pas coutume, je vais prendre la défense d'IE.

C'est la bonne et la seule façon de faire, qui marche tout le temps, et qui est la plus logique....

[guy777]

Mouais ... Il est vrai que la syntaxe demandée par IE s'inspire fortement de celle de Java, où l'on doit redéfinir la classe concernée par l'évènement.

M'enfin si on peut pas faire appel à une fonction externe en lui passant des paramètres, je trouve que çà limite la puissance de la chose, et c'est bien dommage. Néanmoins je ne comprends pas bien la logique : un onclick = function () {}. Pourquoi définir une fonction comme ceci ???

Guy777

[denisC]

Néanmoins je ne comprends pas bien la logique : un onclick = function () {}. Pourquoi définir une fonction comme ceci ???

Euh, c'est une question de pycho?!? genre dieux, ma place dans le monde et tout ça? Parceque sinon, du point de vue Javascript, on fait comme ça parceque la syntaxe nous dit de faire comme ça....

[siddh]

en fait le onclick est un pointeur de fonction, soit tu lui affecte directement, soit tu lui passe une référence vers une fonction existante :

Code :

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

1
2
3
4
5
 
function doSomething(){
    alert('hello world');
}
elementjour.onclick=doSomething;

tu remarqueras l'absence de ().

[guy777]

Euh, c'est une question de pycho?!? genre dieux, ma place dans le monde et tout ça? Parceque sinon, du point de vue Javascript, on fait comme ça parceque la syntaxe nous dit de faire comme ça....

Euh non j'suis pas un psycho , mais j'aime comprendre ce que je fais, cela évite bien des erreurs plutôt que d'appliquer bêtement des bouts de code sans vraiment comprendre comment ils fonctionnent.

Ce qui m'interroge surtout, c'est de comprendre comment les concepteurs ont pensé çà, quels en sont les avantages et inconvénients et aussi les alternatives. Remarquez, il n'y a qu'eux pour le dire.

en fait le onclick est un pointeur de fonction

Ca c'est une réponse qui m'interesse, merci siddh.

soit tu lui affecte directement, soit tu lui passe une référence vers une fonction existante :

Ok ! Mais alors pourquoi en passant par une fonction existante, le passage de paramètres fonctionnent mais il pose des problemes :

Un exemple :

Code :

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

1
2
3
4
5
6
7
8
 
...
monObjet.onclick = maFonction(val1, val2, val3);
...
function maFonction(arg1, arg2, arg3) {
   // définition de la fonction
   // par exemple, écrire Hello à un certain endroit
}

Dans cet exemple, le onclick n'est pas "correctement" interprété, la fonction s'éxecute sans attendre le click sur l'objet. Maintenant que siddh me dit que onclick est un pointeur de fonction, le "probleme" parait logique mais c'est tout de même chiant, au premier abord on ne peut pas se douter que çà ne va pas marcher !

Voilà voilà,
Merci quand même à tous ceux qui m'ont répondu

Guy777

[wkhead]

je crois avoir trouvé ton anguille sous roche; n'est-ce pas la difference entre IE et firefox semblable à JS et JavaScript? Je m'explique..

Tout dépendant sous lequel des navigateurs tu roules, il faudra que tu ajuste ta syntaxe; par exemple, il te faudra utiliser les balises [ ] afin qu'IE interprète tes trois valeurs comme tu veux bien l'entendre.

Si ma mémoire ne me joue pas de vilains tours, je suis sur d'avoir lu un article sur les changements apportés à IE dans la nouvelle version (présentement en test) qui va régler ce problème ennuyant.

Donnes-moi de tes nouvelles sur ce sujet histoire de voir si j'ai visé juste ou non.

Ben

[siddh]

le truc, c est que tu ne peut pas passer d'argument sur un evénement :
Comment tu lui passe des arguments sur un click ?

Les seuls arguments que tu reçoit sont des arguments de type Event :

Code :

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

1
2
3
4
 
monobj.onclick = function(e){
   // e est un objet DOM de type Event
}

Si tu as besoin de variables, ce sera forcément des variables qui ont de la portée dans ta page ou qui seront des attributs de l'objet dans lequel tu te trouves.

Cest variables/attributs auront été initialisés avant bien entendu.

[guy777]

C'est vrai que ce probleme n'en est pas vraiment un. Mais l'interpréteur pourrait se dire quand il voit obj.onclick=maFonction(a,b,c) : "tiens il veut que lance la fonction lors du clic !!!".

Bon ceci dit, j'ai refait des prog en tenant compte de cette syntaxe et je n'ai vraiment aucun probleme.

Effectivement si on définit la fonction après le onclick (onclick = function() {}), il faut que les variables à utiliser soit dispos dans la fonction où l'on gère l'évènement. Moi, j'aime pas definir comme çà des fonctions, je préfère les mettre à part (methode classique), du coup j'ai parfois besoin d'avoir des variables globales, après je pense que c'est la préférence du developpeur. Certains vont préférer une méthode, cetains une autre. De toutes façons, du moment que le prog au bout du compte est fiable et fonctionne (et en plus bien écrit), c'est le principal.

il te faudra utiliser les balises [ ] afin qu'IE interprète tes trois valeurs comme tu veux bien l'entendre.

Sans blague, ça fonctionne ???

[SpaceFrog]

Pour passer les paramètres j'utilise la syntaxe suivante:

Code :

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

monobj.onclick = function(){mafontion(param1,param2)}

[guy777]

Ah astucieux !!!

Merci pour le "truc", je n'y avait pas pensé et pourtant tellement simple !