fichier contenant fonction

Bonjour,

Sur des éléments html j'ai des "onchange", "onload", "onclick" etc.
Quelle est la meilleure façon pour externaliser toutes ces fonctions dans un fichier js séparé ? (sachant que j'ai besoin parfois de passer des paramètres...)

pour le moment j'ai un fichier avec un contenu de ce style :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

window.onload = function() {   document.getElementById('un_id').onclick = function() { alert('Not implemented yet !'); return false; };   document.getElementById('encore_un_id').onclick = function() { alert('Hello le monde !'); return false; };   document.getElementById('id').onchange = function(parametre) { if (parametre === 1) alert('OK !');   return false; }; };

---

Quand je n'ai pas de paramètre a passer, c'est nickel ! Quand j'en ai comme la dernière fonction, comment dois-je m'y prendre ?

Citation:

---

Envoyé par Air P-E

Bonjour,

Sur des éléments html j'ai des "onchange", "onload", "onclick" etc.
Quelle est la meilleure façon pour externaliser toutes ces fonctions dans un fichier js séparé ? (sachant que j'ai besoin parfois de passer des paramètres...)

pour le moment j'ai un fichier avec un contenu de ce style :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

window.onload = function() {   document.getElementById('un_id').onclick = function() { alert('Not implemented yet !'); return false; };   document.getElementById('encore_un_id').onclick = function() { alert('Hello le monde !'); return false; };   document.getElementById('id').onchange = function(parametre) { if (parametre === 1) alert('OK !');   return false; }; };

---

Quand je n'ai pas de paramètre a passer, c'est nickel ! Quand j'en ai comme la dernière fonction, comment dois-je m'y prendre ?

---

Lors de l'appel de ta fonction, tu peux directement inclure ton parametre avec sa valeur.
exemple:

Code:

---

<select name="nom" id="id" onchage="taFonction(document.getElementById('idDeTonElement').value);" >

---

C'est quoi parametre ? C'est le value du champ ? Essayez avec this.value alors.

Citation:

---

Envoyé par redo_log

Lors de l'appel de ta fonction, tu peux directement inclure ton parametre avec sa valeur.
exemple:

Code:

---

<select name="nom" id="id" onchage="taFonction(document.getElementById('idDeTonElement').value);" >

---

---

Tu veux externaliser la fonction en la plaçant en attribut ??? :calim2:

Citation:

---

Envoyé par Air P-E

Quelle est la meilleure façon pour externaliser toutes ces fonctions dans un fichier js séparé ? (sachant que j'ai besoin parfois de passer des paramètres...)

---

Merci de vos réponses !

@redo_log :
Oui je sais, c'est ce que j'ai fait en premier lieu mais si j'ai plusieurs actions à effectuer, je suis obligé de faire comme ça :

Code:

---

<select name="nom" id="id" onchage="taFonction(document.getElementById('idDeTonElement').value); uneAutreFonction(document.getElementById('autreID').value);" >

---

Ce qui est moyen si tu es as plusieurs à mettre comme ça ! :? Et puis j'aimerais vraiment séparer l'html du javascript !

@vermine :
Pas tout à fait, dans mon code, ça correspond plutôt à l'objet SELECT, pas sa valeur. Mais en faisant un this ça ne fonctionne pas ! :?
Tu parles bien de faire ceci ?

Code:

---

1 2 3 4 5 6 7 8

window.onload = function() { document.getElementById('id').onchange = function() { if (this.value=== 1) alert('OK !');   return false; }; };

---

Mais pour mon exemple actuellement je fais

Code:

---

1 2 3 4 5 6 7 8 9

window.onload = function() { document.getElementById('id').onchange = function() { var truc = document.getElementById('id') if (truc.value=== 1) alert('OK !');   return false; }; };

---

Ce qui fonctinne très bien si on veut travailler sur l'élément en question vu qu'on a juste à le récupérer via son id.

En fait je pose cette question plus pour une configuration comme celle-ci :

Code:

---

1 2 3 4 5 6 7

window.onload = function() { document.getElementById('id').onchange = function(textAAfficher) { document.getElementById('id').value = textAAfficher;   return false; }; };

---

en admettant que 'id' correspond à l'id d'une textarea et 'textAAfficher', le texte avec lequel remplir la textarea.

Vous voyez le truc ? Je sais pas comment passé le texte en paramètre ! :(

Edit :
Bovino, je ne comprends pas exactement ce que tu veux dire ! :roll:

Oui c'est à ça que je pensais. D'où vient le textAAfficher ? Je veux dire, il se trouve bien quelque part sur la page ?

Citation:

---

Envoyé par vermine

Oui c'est à ça que je pensais. D'où vient le textAAfficher ? Je veux dire, il se trouve bien quelque part sur la page ?

---

textAAfficher serait un texte renvoyé par une requête Ajax.
Si je récupère mon texte par une requête ajax et que j'ai envie de modifier le contenu d'une textarea, lors d'un clique sur celui-ci (par exemple, pourquoi pas après tout ! :aie:) comment s'y prendre ? :calim2:

Il n'y a pas de solutions pour mon problème ? :cry:
Peut-être qu'il existe un autre moyen que la manière dont je m'y suis pris ?

Je voudrais pouvoir séparer le code html du code javascript en pouvant passer des paramètres à la fonction appelée... Il y a sûrement une solution autre que la mienne !? :calim2:

Voyons voir… Recollons dans les bon ordre les bouts du scénario.

1/ Une réponse Ajax arrive.
2/ Le visiteur modifie un champ <select>
3/ tu voudrais récupérer le texte Ajax dans la fonction qui traite le changement du <select>.

J'ai bon ?

Il va falloir passer, d'une manière ou d'une autre, par une variable globale. Par « d'une manière ou d'une autre » je veux dire que tu peux stocker ça sous un espace de noms, ou encore rattacher ce texte à un nœud du DOM, en faisant ce qu'on appelle une propriété expando.

Je m'explique : au moment ou ta réponse Ajax arrive, elle est traitée par une fonction de rappel. Dans cette fonction de rappel, tu vas attacher le texte de la réponse au nœud DOM représentant ton <select>, et de fait lui créer un attribut qui n'est pas « officiel DOM ». C'est ça qu'on appelle une propriété expando.

Concrètement :

Code:

---

1 2 3

<select id="leSelect"> ... </select>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

window.onload = function() {   var leSelect = document.getElementById('leSelect');   function rappelAjax( texte ) { /* je reste flou sur la mise en œuvre d'Ajax, ce n'est pas le sujet du topic */ leSelect.ajaxTexte = texte; };   leSelect.onchange = function() { alert(this.ajaxTexte); };   };

---

C'est tout !

;)

Citation:

---

Envoyé par Air P-E

Il n'y a pas de solutions pour mon problème ? :cry:

---

Code:

---

document.getElementById('id').onchange = function(parametre) {...}

---

En effet, tant que tu n'auras pas compris que dans la portion de code ci-dessus, parametre ne correspond pas à un paramètre que tu inclus à la fonction mais au nom qu'aura, dans la fonction, le paramètre passé lors de l'appel, il n'y aura pas de solution.

D'autre part, s'agissant d'une fonction anonyme lancée lors du déclenchement d'un événement, je ne vois pas comment il serait possible de lui passer un paramètre...