Reconnaitre et affecter des inputs

Bonjour !

je me suis lancé dans un projet assez complexe
j'aimerai faire un tableau dans lequel il y aurait une classe et des sous fonctions.
celles ci seraient demandé dans des labels.

j'ai ainsi crée 3 label :

• le premier dans lequel je mets des classes
• le deuxième dans lequel je mets des sous parties
• le troisième dans lequel je suis censé indiquer la classe d'une sous partie (les deux devant figurer dans les labels du dessus).

lorsque la sous partie est identifiée elle est rangé dans un tableau qui correspondra à la dites classe.

j'ai donc un problème:
comment reconnaitre deux input et classer ceux ci en fonctions des inputs précédent, et comment créer un tableau pour la classe correspondante

voici un exemple type:

• classe : fruits, légumes
• sous parties: bananes, haricots, fraise

reconnaitre: bananes, fruits ; haricots, légumes ; fraise, fruits

rendu:

• Fruits:
  bananes, fraise
  
• Légumes:
  haricots

voici donc mon code pour le moment. j'espère que c'est une bonne approche du rendu final puisque j'y ai travaillé très longtemps (pour peu d'ajout et pour essayer de comprendre certaines choses, parfois en vain) je me rends bien compte en tant que débutant que mon projet semble être ambitieux et difficile et donc mon code pourrait devoir vous insatisfaire et j'en suis désolé.
https://jsfiddle.net/floflo777/ceg5vw2d/167/

Merci de votre aide !
Bien cordialement un apprenti reconnaissant.

Bonjour,
je dois admettre que je ne comprend pas bien ce à quoi tu veux aboutir !

Tes trois <input> sont indépendant l'un de l'autre, il te faut, si tu souhaites affecter à « fruits », une fois crée, que, lors de la création de « banane », par exemple, tu puisses choisir dans quelle catégorie tu veux mettre ce nouvel élément. (lire lentement la phrase)

Mais est-ce cela le but recherché !?!

Excusez moi si ce n'était pas clair:
En effet, j'aimerais avec 3 input indépendants pouvoir choisir à quelle classe affecter une sous partie
si ce n'est toujours pas clair voici un exemple le plus concret possible

1er input : fruits
2eme input : banane
3eme input :fruits, banane

Dans le 1er input, j'indique 1 ou plusieurs classes.
dans le second input, j'indique 1 ou plusieurs sous parties.
dans le troisième input, j'indique la classe dans laquelle ira la sous partie
Cependant le 3eme input sert peut être à rien et peut être que je ne peux pas afficher en même temps "fruits, banane"
dans ce cas le 3eme input serait la classe de la sous partie
petit exemple pour fluidifier ce pavé

1er input: fruits
2eme input: banane
3eme input: fruits

ainsi, le 3eme input récupère avec Getelementbyid "banane" et le met dans le tableau "fruits" que l'on a désigné dans le premier input
à savoir il faut donc créer un tableau à chaque nouvelle classe ce que je ne sais pas faire mais si vous ne pouvez pas me renseigner sur ce point je tacherai de me débrouiller seul

P.S [ lire lentement pour mieux comprendre ]

Merci Beaucoup de votre aide, en espérant avoir été plus clair.

Bonjour,

Toujours pas.


1- C'est (probablement) ta méthodologie qui est mauvaise.

Citation:

---

Envoyé par darkside777

...ainsi, le 3eme input récupère avec Getelementbyid "banane" et ...

---

Quel intérêt d'un 3ème input, si c'est pour "récupérer" (?) ce qui est écrit dans les 2 autres ?
Ça n'a pas de sens.

2- C'est aussi la terminologie qui manque de précision : "classe" ? "sous partie" ? "fonction" ? :koi:
Ça veut dire quoi ?

3- Si on part du principe que :

• ce que tu appelle "classe" peut être appelé "catégorie"
• qu'une "catégorie" peut contenir des "sous-catégories" (autrement dit : une "catégorie parente" peut avoir des "catégories enfants")
• que dans une "catégorie" on peut mettre des "produits"

Alors le système devient beaucoup clair, et finalement très "classique", non ?

4- Alors, on peut séparer le traitement en 2 parties indépendantes :

4.1- Ajouter une catégorie :

• un <input> : "nom de la catégorie"
• un <select> (liste des catégories déjà enregistrées) : "catégorie parente" (si "pas de parent" => 0)
• un <input> : "Ajouter la catégorie"

4.2- Ajouter un produit :

• un <input> : "nom du produit"
• un <select> (liste des catégories enregistrées) : "catégorie du produit"
• un <input> : "Ajouter le produit"

5- Et si c'est destiné à être enregistré en Base de Données, il faut avoir un langage serveur, comme PHP (qui peut être appelé via Ajax).



N.B. Si ça ne correspond pas à ce que tu veux, alors je n'ai vraiment rien compris... malgré tes "explications", et bien que j'ai lu plusieurs fois, lentement... :aie:

Merci beaucoup c'est exactement ça !

Pourriez vous juste me montrer un exemple ?
si cela ne vous dérange pas:?

J'étais parti sur ça https://jsfiddle.net/floflo777/fwb1g2az/98/ parce que j'étais vraiment résolu à la trouver cette réponse :D mais bon ça devient compliqué même pour moi qui l'ai fait

Merci beaucoup

1- Je t'ai indiqué l'architecture HTML *.

2- L'architecture des array/objets JavaScript à construire sera (de la forme) :

Code:

---

1 2 3 4 5 6

var categories = []; // array categories[0] = { 'nom':'fruits-legumes', 'parent':''} // PAS de catégorie parente categories[1] = { 'nom':'fruits', 'parent':0} // parent : 'fruits-legumes' categories[2] = { 'nom':'legumes', 'parent':0} // parent : 'fruits-legumes' // .... console.log( categories );

---

Code:

---

1 2 3 4 5 6

var produits = []; // array produits[0] = { 'nom':'banane', 'categorie':1} // catégorie : 'fruits' produits[1] = { 'nom':'haricot', 'categorie':2} // catégorie : 'legumes' produits[2] = { 'nom':'fraise', 'categorie':1} // catégorie : 'fruits' // .... console.log( produits );

---

3- * dans les 2 <select> : on ré-affiche (via JS, à chaque fois qu'une nouvelle catégorie est créée) la liste de toutes les catégories enregistrées.

4- Maintenant que tu as une méthodologie claire, tu devrais pouvoir t'en sortir, non ?

Merci !

bj,

quelques précisions:
dans ```categories```, il n'y a pas besoin de parent (car dans darkside777#1 post) sous-partie/partie réfère juste à l'élément d'une classe/catégorie

la relation est juste
typeA: pasteque, melon
typeB: cerise, mures
avec typeA: les-trucs-a-cocktails et typeB les-trucs-rouges

indépendamment de l'affichage, la structure qui vient pas mal à l'esprit c'est une simple map

Code:

---

1 2 3 4

var classToParts = { 'les-trucs-a-cocktails':['pasteque', 'melon'], 'les-trucs-rouges':['cerises', 'mures'] }

---

le tableau de classes s'obtient par

Code:

---

classes = Object.keys(classToParts) //['les-trucs-a-cocktails','les-trucs-rouges']

---

quelques avantages de la représentation ci-dessus sont:
- un accès rapide au tableau: pour ajouter un produit

Code:

---

classToParts[klass].push(produit)

---

- une seule structure à gérer
- un parcours "lié" pour afficher (dans jreaux62 il faut soit trier le tableau de produits, soit itérer sur les catégories mais pour chaque catégorie itérer sur tout le tableau de produit.., soit dénormaliser le nom de la catégorie sur le produit a au lieu d'y référer par un nombre)

Code:

---

1 2 3 4 5 6 7 8 9

var s = '' classes = Object.keys(classToParts) classes.forEach(c=>{ s += '<li>'+c+'<ul>' classToParts[c].forEach(p=>{ s += '<li>'+p+'</li>' }) s += '</ul></li>' })

---

mais peut-être que tu as une idée derrière la tête non dite qui du coup rend l'approche par map non pertinente.

dans tous les cas tu transpires pas beaucoup quelque soit l'approche que tu prends, donc prends celle qui te semble la plus familière?

Il faut dire que je m'exprime bien mal sur mes attentes.
en plus, je ne suis pas très bon en js et je n'arrive pas bien à me rendre compte si ce que vous m'apportez m'aidera à résoudre mon problème.:aie:
je vous invite à regarder ce projet ci dessous avec une description à chaque nouveau label.
https://jsfiddle.net/floflo777/jk7htm30/59/
voila j'espère que vous comprendrez ainsi mieux mes attentes et je tacherai de bien comprendre vos réponses.

Citation:

---

je vous invite à regarder ce projet ci dessous avec une description à chaque nouveau label.
https://jsfiddle.net/floflo777/jk7htm30/59/
voila j'espère que vous comprendrez ainsi mieux mes attentes et je tacherai de bien comprendre vos réponses.

---

perso pour moi le temps s’obscurcit !

Je ne vois rien dans ton code qui met en application ce qui t'a été proposé !

Oui,
c'est normal car j'ai du mal à comprendre les réponses du fait que je sois débutant.
en outre dans ma question, je demande en quelque sorte ou je dois placer vos idées.
Merci

Bonjour,

Quand on est débutant, on commence avec des choses SIMPLES.
Sinon, on risque de se décourager.



1- il ne faut pas chercher à adapter "nos idées" à "ton code existant".
On te propose une MEILLEURE approche.

Donc : OUBLIE ton code, et recommence depuis zéro.



2- Dans ce que JE t'ai proposé, il y a 2 choses, qui peuvent être traitées indépendamment.

2.1- Essaie déjà de créer des "catégories" (sans te soucier des "objets"/"produits") dans une premier temps.
2-2- Ensuite, essaie de ré-afficher les catégories créées dans une liste (<ul><li>), puis une liste déroulante (<select>) : seul de code HTML change).

Merci beaucoup de votre aide précieuse qui m'a permis de bien avancer dans mon projet !
je m'excuse par ailleurs de ne pas avoir pris le temps de vous remercier plus tôt :calim2:

Merci !

Citation:

---

Envoyé par jreaux62

1- Ajouter une catégorie :

• un <input> : "nom de la catégorie"
• un <select> (liste des catégories déjà enregistrées) : "catégorie parente" (si "pas de parent" => 0)
• un <input> : "Ajouter la catégorie"

---

Citation:

---

2.1- Essaie déjà de créer des "catégories" (sans te soucier des "objets"/"produits") dans une premier temps.
2-2- Ensuite, essaie de ré-afficher les catégories créées dans une liste (<ul><li>), puis une liste déroulante (<select>) : seul de code HTML change).

---

Alors ?

Tu l'as fais ?
Ça donne quoi ?

Ah oui pardon !
j'aura du l'envoyer plus tot
j'en étais à la quand je me suis arrêté.
c'est pas génial et je suis pas sur d'avoir tout très bien compris.
soit j'ai raté un truc dans vos instructions
soit c'est bien ça mais ça me semble étrange

https://jsfiddle.net/floflo777/csp9xyvt/37/

Quand on ajoute une catégorie, la liste déroulante des catégories ne change pas.
Ça devrait.

effectivement...
je veux bien un petit peu d'aide dans ce cas
je n'arrive pas à comprendre comment on pourrait ajouter des valeurs d'input en JavaScript dans un select de HTML
il faudrait pour ca changer la variable js en select...
je ne trouve pas grand chose sur google en plus
Merci

:koi: Comme tous tes liens vers des « JSFiddle » sont morts je présume que ton soucis est résolu.

Oui j'ai fini excusez-moi de ne pas avoir clicker sur "résolu"
voila le rendu final bien plus simple que le premier projet que j'avais rendu très compliqué je ne sais pas pourquoi.
j'espère que vous pourrez le voir.
https://jsfiddle.net/floflo777/jLpzkwqm/