Discussion :

[kilian]

Bonjour,

Je suis face à un probleme en javascript et je ne sais pas du tout comment m'y prendre ( je ne sais pas non plus si ce que je vais vous détailler ci-dessous est faisable )

Explication.

Je possède un Select :

Code :

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

1
2
3
4
5
<select id="monselect" size="1" onchange="selection('monselect',4);">
  <option value="1-3-4-2" selected>choix1</option>
  <option value="1-2">choix2</option>
  <option value="1-4">choix3</option>
</select>

Egalement des div

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
 
<div id="1" >
Mon div 1
</div>
 
<div id="2">
Mon div 2
</div>
 
<div id="3">
Mon div 3
</div>
 
<div id="4">
Mon div 4
</div>

Suivant mon choix je souhaiterais afficher

le "<div id="1" >" "<div id="3" > ...

dans value <option value="1-3-4-2" selected>choix1</option>

j'arrive à faire afficher le bloc 1, 3, 4, 2... Suivant la selection.

En gros je mets en hidden ou non les bloc div.

Cependant les bloc's s'affiche dans l'ordre des div de mon code.

En effet je verrais la div 1, 2, 3, 4 et non 1, 3, 4, 2

Vous me direz que c'est tout à fait normal. Mais est ce qu'il existe une fonction, un possibilité qu'elle s'affiche dans l'ordre paramétré dans le value.

J'espere que vous comprenez ce que je souhaite faire. Je reste à votre disposition si vous avez besoin de plus d'informations
Merci & A bientôt
Kilian

[Bovino]

Salut.

Puisqu'il s'agit d'afficher ou non des éléments dans un ordre donné, la solution que j'implémenterais à ta place serait d'affecter tes div à des variables :

Code :

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

var maDiv1 = document.getElementById('div1').cloneNode(true);

puis à chaque changement, vider l'élément englobant et ajouter chaque élément avec :

Code :

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

eltEnglobant.appendChild(divn);

dans une boucle sur le split du value du select :

Code :

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

1
2
3
4
5
6
var nbDiv = document.getElementById('monselect').value;
var tabDiv = nbDiv.split('-');
var i=0;
while(tabDiv[i++]){
    eltEnglobant.appendChild(window['maDiv' + tabDiv[i]);
}

[kilian]

Oula, je suis assez newbies en javascript, il faut que je vois comment on utilise "appendChild" comment cela fonctionne...

En ce moment ma fonction javascript ressemble à ca :

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
20
21
22
23
function selection(monselect,nombrediventout) {
 
	for (var i=1; i<=nombrediventout; i++) {
 
		document.getElementById(i).style.visibility='hidden';
		document.getElementById(i).style.display='none';
 
	}
 
 
	var machaine = document.getElementById(monselect).options[document.getElementById(monselect).selectedIndex].value
 
	var  tableau=machaine.split('-');
 
	for (var i=0; i<tableau.length; i++) {
 
		document.getElementById(tableau[i]).style.visibility='visible';
		document.getElementById(tableau[i]).style.display='block';
 
	}
 
 
   }

tu vois c'est assez bête cependant, l'ordre n'est pas pris en compte.

Je te remercie encore pour ta proposition et je vais essayer de la comprendre.

Merci et a +

[kilian]

A vrai dire, je suis un peu perdu, je m'excuse de revenir à la charge...

Voici ce que je propose ( cela ne fonctionne pas ) mais au moins tu pourras voir dans quelle direction je vais :

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
20
21
   function selection(monselect,nombrediventout) {
 
	var maDiv1 = document.getElementById('1').cloneNode(true);
	var maDiv2 = document.getElementById('2').cloneNode(true);
	var maDiv3 = document.getElementById('3').cloneNode(true);
	var maDiv4 = document.getElementById('4').cloneNode(true);
	var maDiv5 = document.getElementById('5').cloneNode(true);
	var maDiv6 = document.getElementById('6').cloneNode(true);
 
 
	var machaine = document.getElementById(monselect).options[document.getElementById(monselect).selectedIndex].value
 
	var  tableau=machaine.split('-');
	for (var i=0; i<tableau.length; i++) {
 
		eltEnglobant.appendChild(window('maDiv' + tableau[i]));
 
	}
 
 
   }

Qu'est ce que "eltEnglobant" ? qu'est ce qu'il y a dans cette variable ?
Est ce que je suis à peu près bien parti par rapport à ce que tu me proposes.

Merci a+

-------Edit--------

Ma 2eme version du code, elle ne fonctionne pas mieux, mais je pense que j'ai un peu avancé :

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
20
21
22
23
24
function selection(monselect,nombrediventout) {
 
	var monnouvelelement = document.createElement('div');
 
	var maDiv1 = document.getElementById('1').cloneNode(true);
	var maDiv2 = document.getElementById('2').cloneNode(true);
	var maDiv3 = document.getElementById('3').cloneNode(true);
	var maDiv4 = document.getElementById('4').cloneNode(true);
	var maDiv5 = document.getElementById('5').cloneNode(true);
	var maDiv6 = document.getElementById('6').cloneNode(true);
 
 
	var machaine = document.getElementById(monselect).options[document.getElementById(monselect).selectedIndex].value
 
	var  tableau=machaine.split('-');
	for (var i=1; i<=tableau.length; i++) {
 
		monnouvelelement.appendChild(window('maDiv' + tableau[i]));
 
 
	}
 
 
   }

[Gsnalf]

il est interdit de mettre un nombre dans un id, l'id doit obligatoirement commencer par une lettre

[kilian]

Ok merci pour l'info, je vais voir pour modifier les noms id "num1"...
Cependant je pense qu'il y a encore autre chose qui "déconne" dans mon script.
A suivre, je vais essayer de chercher plus loin
a+

[kilian]

La suite de mon code, je commence vraiment à désespérer...

Voici l'erreur que j'obtiens dans FireFox :

Erreur*: uncaught exception: [Exception... "Cannot convert WrappedNative to function" nsresult: "0x8057000d (NS_ERROR_XPC_CANT_CONVERT_WN_TO_FUN)" location: "JS frame :: file:///Nouvelles%20Docs/doc/index.html# :: selection :: line 84" data: no]

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
20
21
   function selection(monselect,nombrediventout) {
 
	var monnouvelelement = document.createElement('div');
 
	var maDiv1 = document.getElementById('id1').cloneNode(true);
	var maDiv2 = document.getElementById('id2').cloneNode(true);
	var maDiv3 = document.getElementById('id3').cloneNode(true);
	var maDiv4 = document.getElementById('id4').cloneNode(true);
	var maDiv5 = document.getElementById('id5').cloneNode(true);
	var maDiv6 = document.getElementById('id6').cloneNode(true);
 
	var machaine = document.getElementById(monselect).options[document.getElementById(monselect).selectedIndex].value
 
	var  tableau=machaine.split('-');
	for (var i=1; i<=tableau.length; i++) {
 
		monnouvelelement.appendChild(window('maDiv' + tableau[i]));
	}
 
 
   }

Je ne sais plus quoi faire. Je vous serais vraiment très reconnaissant si vous arrivez à me donner un petit coup de pouce.

Merci bien
A bientot

EDIT :

La ligne 84 correspond : "monnouvelelement.appendChild(window('maDiv' + tableau[i]));"

[vermine]

Bonjour,

Il y a une incohérence dans le code de Bovino, que vous avez peut-être mal corrigé:

Code :

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

1
2
3
4
5
6
//Bovino
eltEnglobant.appendChild(window['maDiv' + tabDiv[i]);

//Vous
monnouvelelement.appendChild(window('maDiv' + tableau[i]));

Je suppose que c'est:

Code :

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

1
2
monnouvelelement.appendChild(window['maDiv' + tableau[i]]);

[kilian]

Bonjour vermine,

J'ai corrigé ma faute, merci

Code :

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

1
2
3
4
	for (var i=1; i<=tableau.length; i++) {
 
		monnouvelelement.appendChild(window['maDiv' + tableau[i]]);
	}

Cependant, ca n'arrange rien, c'est toujours pareil... snif.

Je me demande si je ne devrais pas changer de solution, car je ne vois pas du tout, je ne maitrise pas vraiment le JavaScript...

Dommage que Bovino ne passe pas par là, comme c'était lui qui m'avait proposé une solution.

Merci encore à tous pour votre aide

[vermine]

monnouvelelement, vous devez aussi l'inclure dans le document avec un appendChild:

Code :

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

1
2
 
quelque_chose.appendChild(monnouvelelement);

Et quelque chose, c'est un élément de la page (le formulaire ? Bref, l'endroit où vous voulez voir les div).

[Bovino]

Bonjour,

Il y a une incohérence dans le code de Bovino, que vous avez peut-être mal corrigé:

Code :

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

1
2
3
4
5
6
//Bovino
eltEnglobant.appendChild(window['maDiv' + tabDiv[i]);

//Vous
monnouvelelement.appendChild(window('maDiv' + tableau[i]));

Je suppose que c'est:

Code :

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

1
2
monnouvelelement.appendChild(window['maDiv' + tableau[i]]);

Oui, bien vu

Bonjour vermine,

J'ai corrigé ma faute, merci

Code :

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

1
2
3
4
	for (var i=1; i<=tableau.length; i++) {
 
		monnouvelelement.appendChild(window['maDiv' + tableau[i]]);
	}

Cependant, ca n'arrange rien, c'est toujours pareil... snif.

Je me demande si je ne devrais pas changer de solution, car je ne vois pas du tout, je ne maitrise pas vraiment le JavaScript...

Dommage que Bovino ne passe pas par là, comme c'était lui qui m'avait proposé une solution.

Merci encore à tous pour votre aide

Dans mon code, les variables maDivn doivent être déclarées comme globales (window['maDiv' + tableau[i]] affecte une variable à l'objet window), or dans ta fonction, tu les déclares en local
Remplace le bloc

Code :

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

1
2
3
4
5
6
var maDiv1 = document.getElementById('id1').cloneNode(true);
var maDiv2 = document.getElementById('id2').cloneNode(true);
var maDiv3 = document.getElementById('id3').cloneNode(true);
var maDiv4 = document.getElementById('id4').cloneNode(true);
var maDiv5 = document.getElementById('id5').cloneNode(true);
var maDiv6 = document.getElementById('id6').cloneNode(true);

par

Code :

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

1
2
3
4
var i = 0;
while(document.getElementById('id' + ++i){
    window['maDiv'+i] = document.getElementById('id' + i).cloneNode(true);
}

[kilian]

Salut, tout le monde,
Je voudrai vous remercier pour votre aide par rapport à mon probleme ci-dessus.
Mais malgré vos aides, mes tests etc... je n'arrive vraiment pas à trouver la solution alors que toutes les informations sont sous mes yeux.
Toujours là même erreur.
Je ne veux pas vous déranger plus longtemps. Je vais essayer de trouver une alternative....
Merci encore à vous tous.
A+
Kilian