Discussion :

[Invité]

1- 'use strict' permet d'afficher toutes les erreurs (variables non déclarées,....)
regarde dans la console.

Il faut toujours utiliser ce mode, surtout quand on est débutant.

[claude.aignant]

J'ai récupéré un de tes codes checkbox voir post précédent ;-)

Pour les erreurs sur la console voila ce que je vois :

Uncaught ReferenceError: ii is not defined
at get_categories_by_level (NewCodeJREAUX62.html:287)
at Parser (NewCodeJREAUX62.html:273)
at HTMLButtonElement.<anonymous> (NewCodeJREAUX62.html:248)

En dehors du fait que j'ai du mal a interpréter correctement l'origine des erreurs, je ne reconnais rien de moi

[Invité]

1- MERCI d'avoir fait une copie de mon code !!
Je suis en train de ré-écrire les dernières modif.

2-

...je ne reconnais rien de moi ...

Et alors ?
Ca ne t'empêche pas de corriger !

[claude.aignant]

Et alors ?
Ca ne t'empêche pas de corriger !

OK!!! je vais essayer, mais mon 1er reflexe a été de chercher où MOI j'avais généré ces erreurs!
[Edit] sauf erreur, ligne 287 : var ii = arr.length;
Bon et visiblement çà suffit pas, il la faut en globale..

[Invité]

1- Dois-je comprendre que tu fais partie de ces gens qui ne ramassent pas un papier par terre, sous prétexte que ce n'est pas "eux" qui l'ont jeté ?

2- Tes listes liées ne fonctionnent pas.

N.B. Je sais comment corriger, mais je ne vais pas tout faire à ta place.
Ce ne serait pas pédagogique.

[claude.aignant]

1- Dois-je comprendre que tu fais partie de ces gens qui ne ramassent pas un papier par terre, sous prétexte que ce n'est pas "eux" qui l'ont jeté ?

2- Tes listes liées ne fonctionnent pas.

Tu prends des raccourcis un peu rapides et hasardeux je trouve...
Tu aurais pu te dire : "Dois-je comprendre que tu fais partie de ces gens qui pensent avoir jeté un papier par terre, même s'ils se doutent qu'à priori ce n'est pas eux ? "

Les listes fonctionnent visiblement, j'ai compris qu'il me fallait la déclarer en globale

[Invité]

la déclarer en globale est effectivement une solution.

Mais ce n'est pas la seule, ni la meilleure.
quelle est l'autre ?

[claude.aignant]

Je dirai la déclarer en local chaque fois où elle serait 'temporairement' utilisée (afin de pouvoir la réutiliser au besoin ailleurs?).
Mais çà me paraît bien fastidieux à mon niveau.

[Invité]

Réponse : on passe la valeur en paramètre de la fonction.

une fois le code optimisé, ça donne :

Code JavaScript :

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
//---------------
// clic sur le bouton "Ajouter Categ"
le_buttonAddCatlvl0.addEventListener('click', function(){ AjouterCat(le_select_1.value); });
le_buttonAddCatlvl1.addEventListener('click', function(){ AjouterCat(le_select_2.value); });
le_buttonAddCatlvl2.addEventListener('click', function(){ AjouterCat(le_select_3.value); });
// --------------
function AjouterCat(le_select_val)
{
  if( le_select_val != '')
  {
    // on ajoute à textarea après formattage
    var prefixe = le_select_val + '_Catégorie_'; //permet de reconnaître pour supprimer/ajouter option // sera supprimé à la fin
    //alert(les_categories[le_select].txt);
    ConcatTousCriteres.value += prefixe + les_categories[le_select_val].txt + ',';
  }
} 
// --------------

Si on veut faire "propre" et lisible (LISIBILITÉ -> indentation) :

Code JavaScript :

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

1
2
3
4
le_buttonAddCatlvl0.addEventListener('click', function(){ 
   AjouterCat(le_select_1.value); 
});
...

C'est clair, c'est propre, c'est lisible.
Et par conséquent plus facile à déboguer.

[claude.aignant]

Réponse : on passe la valeur en paramètre de la fonction.

Alors là désolé mais tu vas trop vite, je ne comprends pas le rapport avec la var 'ii'
D'autant que j'ai le sentiment de 'déjà' passer, dans mon code, la valeur du select en paramètres de la fonction

Code :

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

le_buttonAddCatlvl0.addEventListener('click',function(){if(le_select_1.value==""){return false;}else{le_select=le_select_1.value;AjouterCat(le_select)}});

[Invité]

1- Evidemment on déclare ii "localement", là où on en a besoin (comme la majorité des variable "temporaires") :

Code :

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

var ii;

2- ... sauf que tu as déclaré la fonction SANS paramètre :

Code JavaScript :

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

1
2
3
function AjouterCat()
{
...

N.B. Déclarer une variable en "globale" permet de :

• être accessibles dans plusieurs fonctions
• ne pas être obligé de la re-déclarer en "local" dans ces fonctions

Mais rien n'empêche de n'avoir QUE des variables locales.

[Beginner.]

Alors là désolé mais tu vas trop vite, je ne comprends pas le rapport avec la var 'ii'
D'autant que j'ai le sentiment de 'déjà' passer, dans mon code, la valeur du select en paramètres de la fonction

Code :

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

le_buttonAddCatlvl0.addEventListener('click',function(){if(le_select_1.value==""){return false;}else{le_select=le_select_1.value;AjouterCat(le_select)}});

C'est sans rapport mais pour le second point j'allais te dire la même chose que jreaux62, en effet si tu modifies le code comme cela eh bien cela fonctionne mais on peut du coup se passer de la variable "le_select", par exemple au lieux de faire ça : { le_select = le_select_1.value; AjouterCat(le_select) } tu peux simplement faire ça : { AjouterCat(le_select_1.value) }.

[claude.aignant]

1- Evidemment on déclare ii "localement", là où on en a besoin (comme la majorité des variable "temporaires") :
2- ... sauf que tu as déclaré la fonction SANS paramètre :

1. OK, mais quand j'ai essayé de la déclarer en local, je n'ai pas compris (et comprends toujours pas) ce qui exigeait dans le code en l'état à la déclarer en globale
2. en effet, c'est un oubli (et çà fonctionne car depuis je l'ai laissée en globale), car dans mon post #79 je posais la question : la gérer en locale ou globale?

[claude.aignant]

par exemple au lieux de faire ça : { le_select = le_select_1.value; AjouterCat(le_select) } tu peux simplement faire ça : { AjouterCat(le_select_1.value) }.

En effet, çà allège le code. Toujours besoin d'être hyper explicite et très phrasé sinon je me perds dans mon code
Toutefois je continue d'utiliser le_select dans la fonction appelée.

[Beginner.]

Sinon j'aurais deux remarques :

- Est-ce que tu peux éviter de mélanger ton code avec celui de jreaux62 ? Peux-tu faire comme je l'ai fait : placer le code de jreaux62 au début et le tien juste après de manière bien séparée ?

Je dis ça car ainsi c'est plus facile de déboguer les éventuelles erreurs de ton code, on sait où chercher avec la séparation et en plus c'est bien de mettre de coté le code que l'on sait fonctionner correctement (c'est-à-dire celui de jreaux62) pour pouvoir se concentrer sur le nouveau code que l'on ajoute.

- Le sujet de ce présent fil est résolu (et d'ailleurs tu l'as mis en "résolu") c'est-à-dire que tu as ce que tu voulais : parser le code HTLM correspondant au menu pour pouvoir construire les trois listes déroulantes liées.
Alors pour la suite ce serait plus claire d'ouvrir un autre fil, le sujet serait en gros j'ai trois listes déroulantes liées (ça c'est bon, elles sont produites par le code de jreaux62 fourni dans tel fil...) maintenant je voudrais... et tu expliques ce que tu voudrais...

Bien sûr c'est juste une suggestion...

[Beginner.]

En effet, çà allège le code. Toujours besoin d'être hyper explicite et très phrasé sinon je me perds dans mon code
Toutefois je continue d'utiliser le_select dans la fonction appelée.

Oui mais tu n'en as plus du tout besoin, il te suffit de remplacer :

Code javascript :

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

1
2
3
4
5
6
7
8
9
function AjouterCat() {
        // --------
        //le_select est déjà valorisé avant l'appel
        // on ajoute à textarea après formattage
        var prefixe = le_select + '_Catégorie_'; //permet de reconnaître pour supprimer/ajouter option // sera supprimé à la fin
        //alert(les_categories[le_select].txt);
        ConcatTousCriteres.value += prefixe + les_categories[le_select].txt + ',';
 
    }

Par :

Code javascript :

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

1
2
3
4
5
6
7
8
9
function AjouterCat(le_select) {
        // --------
        //le_select est déjà valorisé avant l'appel
        // on ajoute à textarea après formattage
        var prefixe = le_select + '_Catégorie_'; //permet de reconnaître pour supprimer/ajouter option // sera supprimé à la fin
        //alert(les_categories[le_select].txt);
        ConcatTousCriteres.value += prefixe + les_categories[le_select].txt + ',';
 
    }

La variable est maintenant un paramètre de la fonction plus besoin d'avoir une variable globale (ce qui est mieux, oui il vaut mieux éviter quand c'est possible d'avoir des variables globales...)


Mais en fait tu peux aller plus loin et reprendre le code de jreaux62 au message #90... Car cela est plus économique (une seule condition "if" au lieu des trois que tu as utilisées) et c'est plus lisible.

[Invité]

Bon.

Manifestement, il te manque les bases élémentaires du JavaScript : tu ne connais ni la "portée des variables", ni l'utilisation des fonctions (avec ou sans paramètre).


J'ai donc un CONSEIL : APPRENDS LES BASES du JavaScript !

• Portée des variables
• Fonctions

Et aussi :

• Les bases de JavaScript
• Types et grammaire
• Fonctions et portée des fonctions

Et sur DVP :

• Les meilleurs cours et tutoriels pour apprendre le JavaScript
• FAQ JavaScript

[Beginner.]

Salut,

Nos derniers messages ne t'ont pas fait fuir quand même ?

Sinon je reviens sur ce point :

Bon, pour moi aussi, ce code ajoute à la textarea les options sélectionnées (quand on clique sur l'un des trois boutons) ET le code peut ajouter une même option plusieurs fois (ce qui n'est pas voulu évidemment), mais je vais le gérer plutôt en amont (j'espère) en tentant de coloriser dans le_select_X les options déjà insérées...

Ben si tu colorises les options déjà insérées cela donnera juste une indication visuelle mais cela n’empêchera pas l'ajout d'une même option plusieurs fois...

Perso j'avais penser utiliser un tableau contenant toutes les options déjà insérées et alors à chaque fois que l'utilisateur veut insérer une option on vérifie que celle-ci n'est pas déjà présente dans le tableau et si elle n'y est pas on l’insère dans le textarea...

[Invité]

@Beginner.

Je lui ai donné plein de "devoirs" à faire (tutos à lire,...).
Laisse-lui le temps de digérer !


Sinon... Prévenez-moi quand vous aurez terminé et obtenu le résultat final................ (que j'ai obtenu depuis longtemps avec mes checkbox !)

[claude.aignant]

Salut @Beginner.,

Absolument pas
C'est juste que, suite aux grandes avancées que vous avez permis, il m'a fallu me familiariser avec tout çà et m'atteler à y greffer l'existant (ô combien moche... mais fonctionnel).
J'ai appliqué un système de couleurs, et j'avais conçu mon code (existant) en évitant tout doublon, donc l'ensemble marche nickel

Enfin, nickel je me comprends....
Tout fonctionne, traitements opérationnels, mais en mode strict je n'arrive définitivement pas à me défaire de quelques anomalies de type :

Uncaught TypeError: Cannot read property 'value' of undefined

... et j'y perds un temps incroyable à essayer de les anéantir... sans succès!