Discussion :

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

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

[redo_log]

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 :

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

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

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

[vermine]

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

[Bovino]

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

Code :

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

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

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

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

[Air P-E]

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 :

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

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

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

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 :

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

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 :

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

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 !

[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 ?

[Air P-E]

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 ! ) comment s'y prendre ?

[Air P-E]

Il n'y a pas de solutions pour mon problème ?
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 !?

[Watilin]

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

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

1
2
3
<select id="leSelect">
  ...
</select>

Code JS :

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

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 !

[Bovino]

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

Code :

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

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