choisir un fichier .js à éxécuter en fonction d'une liste

Version imprimable

21/03/2006, 16h47
bikerman

choisir un fichier .js à éxécuter en fonction d'une liste

bonjour à tous !

je commence à peine javascript, je cherche un moyen d'executer un fichier .js en fonction du choix effectuer dans une liste de choix ou check box.

Vous voyez comment on peux faire mais sans php?

Voici mon formulaire

Code:

1
2
3
4
5
6
7
8
9
<form>
  <select size="3" onChange="EXECUTE LE FICHIER CORRESPONDANT OPTION(1 ou 2 ou3).js)">
 
    <option>Choisissez une option
    <option value="option1">option1
    <option value="option2">option2
    <option value="option3">option3
  </select>
</form>

savez vous comment executer le bon fichier optionx.js ?

attention : une balise option se ferme !

sinon j'aurais tenté une bidouille du genre ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="option1.js" id='opt1' disbabled></script>
<script src="option2.js" id='opt2'  disbabled></script>
<script src="option3.js" id='opt3' disbabled></script>
 
<script type='text/javascript'> 
function launch(val){
         for(i=1;i<4;i++){
        document.getELementById('opt'+i).disabled=(val==i)?false:true;
          }
}
 
 
</script>
 
<form>
  <select size="3" onChange="launch(this.value)">
 
    <option>Choisissez une option
    <option value="1">option1</option>
    <option value="2">option2</option>
    <option value="3">option3</option>
  </select>
</form>

Merci pour ta réponse !

j'ai essayé mais non apparement ca passe pas, merci pour option que j'avais pas fermer voici en fait le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
 
<html>
<head>
<title>Document sans titre</title>
</head>
<body>
 
<script src="rouge.js" id='rou' disabled></script>
<script src="vert.js" id='ver'  disabled></script>
<script src="bleu.js" id='ble' disabled></script>
 
<script type='text/javascript'>
function launch(val){
         for(i=1;i<4;i++){
        document.getELementById('opt'+i).disabled=(val==i)?false:true;
          }
}
 
 </script>
<!--couleur-->
<form>
  <select size="3" onChange="launch(this.value)">
 
    <option>Choisissez une couleur
    <option value="1">rouge</option>
    <option value="2">vert</option>
    <option value="3">bleu</option>
  </select>
</form>
 
<!--logo-->
<img src="../img/logo1.gif" name="logo" width="50" height="50">
 
<form> 
  <select size="3" onChange="afficherimage(this.options[selectedIndex].value)">
    <option>Choisissez un logo
    <option value="logo1.gif">logo1</option>
    <option value="logo2.gif">logo2</option>
    <option value="logo3.gif">logo3</option>
    <option value="logo4.gif">logo4</option>
  </select>
</form>
</body>
</html>

et voici le fichier rouge.js

Code:

1
2
3
4
5
6
7
8
9
<script language="JavaScript">
function afficherimage(nom)
  {
  if (document.images)
    {
    document.images['logo'].src = "/img/" + nom;
    }
  }
</script>

donc pour résumer ce que ca devrait faire : on choisi une couleur (rouge) dans la premiere liste ca execute rouge.js qui affiche une image logo1.gif dans la page .html ou une autre selon la seconde liste: ca marche si on met le code de rouge .js mais j'arrive pas a faire un choix

vous pouvez m'aider?

essaye ça ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<script type='text/javascript'>
function launch(val){
         for(i=1;i<4;i++){
        document.getElementById('opt'+i).src=(val==i)?'option'+i+'.js':'';
        alert(document.getElementById('opt'+i).src)
          }
}
 
 
</script>
 
 
</head>
 
<body>
 
 
<form>
  <select onchange="launch(this.value)">
 
    <option>Choisissez une option
    <option value="1">option1</option>
    <option value="2">option2</option>
    <option value="3">option3</option>
  </select>
</form>	
</body>

ça doit tourner sous IE , il faudrai peut être faire une bidouille de preload pour les autre

j' ai testé ça qui m'a l'air de vouloir fonctionner ...:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type='text/javascript'>
 
var paths=new Array()
 
paths[0]=new Image()
paths[0].src="option1.js"
paths[1]=new Image()
paths[1].src="option2.js"
paths[2]=new Image()
paths[2].src="option3.js"
 
 
function launch(val){
         for(i=1;i<4;i++){
        document.getElementById('opt'+i).src=(val==i)?paths[i-1].src:'';
 
          }
}
 
</script>

21/03/2006, 18h11
bikerman

ou la ca fait beaucoup la ! je suis qu'un petit débutant grand maitre !

tu peux m'expliquer un peu ? pourquoi deux code?

pour le premier ca marque dans la console javascript de mozilla :

Erreur : document.getElementById("opt" + i) has no properties
Fichier source : http://127.0.0.1/car/test5.htm
Ligne : 7

pour le deuxieme s'il remplace le premier ca marque:
Erreur : document.getElementById("opt" + i) has no properties
Fichier source : http://127.0.0.1/car/test5.htm
Ligne : 31
21/03/2006, 18h58
bikerman

je comprend ce qui va pas dans IE des que je met option1 dan sla liste ca met erreur sur la page ! j'arrive rien a faire !!!

ps: heuresement que tu m'aide parceque la franchement j'ai essayé plein de truc ca marche pas je deviens fou !

tu as compris l'application que je veux faire ?

le pb vient pas du fait qu'il y est deux fois this.value

arf c'est sur si je ne te donne que la moitié du code tu ne risque pas de t'en sortir ...
desolé trop de precipitation ... j'ai oublié les balise script pour les fichiers externes ...

je reprends ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<html>
<head>
<script id='opt1' src='' ></script>
<script id='opt2' src='' ></script>
<script id='opt3' src='' ></script>
 
<script type='text/javascript'>
var paths=new Array()
paths[0]=new Image()
paths[0].src="option1.js"
paths[1]=new Image()
paths[1].src="option2.js"
paths[2]=new Image()
paths[2].src="option3.js"
 
function launch(val){
         for(i=1;i<4;i++){
         document.getElementById('opt'+i).src=(val==i)?paths[i-1].src:'';
          }
}
 
</script>
</head>
 
<body>
 
 
<form>
  <select onchange="launch(this.value)">
 
    <option>Choisissez une option
    <option value="1">option1</option>
    <option value="2">option2</option>
    <option value="3">option3</option>
  </select>
</form>   
</body>

j'ai testé avec trois fichiers externes cahcun retournant un alert distinct et ça fonctionne ...

sinon tu peu declarer les fichiers script depuis javascript...

Code:

1
2
3
4
5
6
 
 
scriptObj = document.createElement('script');
scriptObj.src = "lefichierJS.js";
scriptObj.defer = true;
document.body.appendChild(scriptObj);

21/03/2006, 20h53
SpaceFrog

aussi à condition d'avoir preloadé les scripts ... en trichant avec des images ...
21/03/2006, 21h12
bikerman

je teste tout ca demain en attendant je vous dis UN GRAND MERCI
je vous tiens au courant !!
bonne soirée
21/03/2006, 23h04
djynwk

Citation:

Envoyé par SpaceFrog

aussi à condition d'avoir preloadé les scripts ... en trichant avec des images ...

bha non pkoi preloadé? Sa marche trés bien comme ça :wink:
22/03/2006, 08h41
bikerman
GRAND MERCI SpaceFrog ca marche sous IE impécable !
Merci à djynwk aussi !

Encore une question pourquoi mozilla ne comprends pas :
Code:

1 2 3 4 5 Erreur : syntax error Fichier source : http://127.0.0.1/car/test5.htm Ligne : 18, Colonne : 9 Code source : for(i=1;i<4;i++){
c'est pas normal ca?
car la ca fonctionne pas avec mozilla

SpaceFrog j'ai encore un défi pour toi apres c'est promis je t'embete plus ! :oops:
ton code marche a merveille (sauf pour firefox) merci beaucoup.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 <html> <head>  <script id='cou1' src='' ></script> <script id='cou2' src='' ></script> <script id='cou3' src='' ></script> <script type='text/javascript'> var paths=new Array() paths[0]=new Image() paths[0].src="noir.js" paths[1]=new Image() paths[1].src="blanc.js" paths[2]=new Image() paths[2].src="rouge.js" function launch(val){ for(i=1;i<4;i++){ document.getElementById('cou'+i).src=(val==i)?paths[i-1].src:''; } } </script>  </head> <body> Veuillez avant tout choisir la couleur du graphique :  <form> <select size="4" onchange="launch(this.value)"> <option selected>Couleurs</option> <option value="1">Noir</option> <option value="2">Blanc</option> <option value="3">Rouge</option> </select> </form>  <br> Ensuite Choisissez un graphique :  <form> <select onChange="afficherImage(this.options[selectedIndex].value)"> <option value="Deco1.gif" selected>Damier</option> <option value="Deco2.gif">Racing</option> </select> </form>  <br>  <img src="../img/noir/Deco1.gif" name="chiffre" width="561" height="125"> </body> </html>
je te remet un exmple de fichier "noir.js"
Code:

1 2 3 4 5 6 7 function afficherImage(nom) { if (document.images) { document.images['chiffre'].src = "noir/" + nom; } }
maintenant comment faire varier le repertoir de l'image avec un click sur un bouton ou une image)

j'ai imaginer deux possibilités :

1* soit on fait varier le repertoire source du fichier noir.js par ex:
Code:

1 2 paths[0]=new Image() paths[0].src="[color=red]rep2/[/color]noir.js"
2* soit dans le fichier noir.js on fait varier le repertoire source de l'image par ex:

Code:

document.images['chiffre'].src = "noir[color=red]/rep2[/color]" + nom;

le but étant d'aller chercher un fichier image (Deco1.gif) choisi dans la liste d'option mais que si on clic sur un bouton ca va chercher le fichier dans rep2/Deco1.gif ??

je sais pas si ca fonctionne comme ca car on a déja lancé le noir.js et la on corrige apres alors je suis coincé tu vois comment faire?

08/04/2006, 10h08
javatwister

djynwk t'a donné la solution: si tu veux créer une balise de script à la demande, eh bien... crée-la à la demande!
10/04/2006, 09h47
bikerman

je comprend pas ce code en fait, comment l'intégrer dans mon application car la j'avoue je seche.... vous pouvez m'en dire plus svp les amis ?
10/04/2006, 14h48
bikerman

en fait la question est comment l'intercaler dans le code de spacefrog?