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

**bikerman** · 21/03/2006, 16h47

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?

**bikerman** · 21/03/2006, 17h06

Voici mon formulaire

Code :

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

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 ?

**SpaceFrog** · 21/03/2006, 17h18

attention : une balise option se ferme !

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

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

**bikerman** · 21/03/2006, 17h39

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 :

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

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

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?

**SpaceFrog** · 21/03/2006, 17h57

essaye ça ...

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

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

**bikerman** · 21/03/2006, 18h11

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

**bikerman** · 21/03/2006, 18h58

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

**SpaceFrog** · 21/03/2006, 20h35

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 :

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

**djynwk** · 21/03/2006, 20h44

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

Code :

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

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

**SpaceFrog** · 21/03/2006, 20h53

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

**bikerman** · 21/03/2006, 21h12

je teste tout ca demain en attendant je vous dis UN GRAND MERCI
je vous tiens au courant !!
bonne soirée

**djynwk** · 21/03/2006, 23h04

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

**bikerman** · 22/03/2006, 08h41

GRAND MERCI SpaceFrog ca marche sous IE impécable !
Merci à djynwk aussi !

Encore une question pourquoi mozilla ne comprends pas :

Code :

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

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

**bikerman** · 07/04/2006, 14h10

SpaceFrog j'ai encore un défi pour toi apres c'est promis je t'embete plus !

ton code marche a merveille (sauf pour firefox) merci beaucoup.

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
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 pour charger les script .js en fonction d'un menu n°1-->
<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>
<!--FIN du Script pour charger les script .js en fonction d'un menu N°1-->
</head>
 
<body>
Veuillez avant tout choisir la couleur du graphique :
<!--Formulaire de choix n°1-->
<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>   
<!--FIN du Formulaire de choix de la couleur N°1-->
 
 
<br>
Ensuite Choisissez un graphique :
<!--Formulaire de choix du graphique N°1-->
<form>
  <select onChange="afficherImage(this.options[selectedIndex].value)">
    <option value="Deco1.gif" selected>Damier</option>
    <option value="Deco2.gif">Racing</option>
  </select>
</form>
<!--FIN du Formulaire de choix du graphique N°1-->
 
<br>
<!--Emplacement de l'image à placer où il faut même dans un calque-->
<img src="../img/noir/Deco1.gif" name="chiffre" width="561" height="125">
 
</body>
</html>

je te remet un exmple de fichier "noir.js"

Code :

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

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 :

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

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 :

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

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?