Liste de choix et chargement script JS

**draidius** · 07/02/2024, 07h59

Bonjour

J'ai fait un petit code avec une liste d'options qui forme un menu déroulant appelant des fichiers *.JS
les fichiers *JS sont bien dans le même répertorie que la feuille htlm

Code html :

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="FR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site de distribution</title>
    <style>
        /* Style pour les menus et le bouton de téléchargement */
        .menu-container {
            display: inline-block;
            margin-right: 10px; /* Ajoutez de l'espace entre les menus */
        }
        #zoneTelechargement {
            display: inline-block;
            margin-left: 10px; /* Décale le bouton vers la droite */
            margin-top: 10px; /* Ajoutez de l'espace en haut */
        }
    </style>
</head>
<body>
 
<form method="POST" action="--WEBBOT-SELF--">
	<!--webbot bot="SaveResults" U-File="D:\pages_tests\_private\form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" -->
	<p align="center"><input border="0" src="../Sites_web/Images/Inserm.jpg" name="I1" width="870" height="258" type="image"></p>
</form>
<p align="center">Merci de remplir le fichier de licence pour les logiciels 
payants:<!-- Liste déroulante pour le premier menu -->
<a href="../Licences_Logiciels/Liste_Licences_par_service.xlsm">Fichier de 
licence</a>, A l'ouverture du lien, faire &quot;Ouvrir avec&quot; et ne pas choisir &quot; 
Enregistrer sous&quot;</p>
 
<!-- Premier menu "Choisissez un site" -->
<div class="menu-container">
    <label for="siteMenu">Choisissez un site :</label>
    <select id="siteMenu" onchange="choisirScript()">
        <option value="ScriptCommun">Logiciels communs</option>
        <option value="scriptSite1">Site1</option>
        <option value="scriptSite2">Site2</option>
    </select>
</div>
 
<!-- Deuxième menu "Choisissez le système d'exploitation" -->
<div class="menu-container">
    <label for="deuxiemeMenu">Choisissez le système d'exploitation :</label>
    <select id="deuxiemeMenu" onchange="afficherTroisiemeMenu()"></select>
</div>
 
<!-- Troisième menu "Choisissez une catégorie" -->
<div class="menu-container">
    <label for="troisiemeMenu">Choisissez une catégorie :</label>
    <select id="troisiemeMenu" onchange="afficherQuatriemeMenu()"></select>
</div>
 
<!-- Quatrième menu "Choisissez un environnement" -->
<div class="menu-container">
    <label for="quatriemeMenu">Choisissez un environnement :</label>
    <select id="quatriemeMenu" onchange="afficherCinquiemeMenu()"></select>
</div>
 
<!-- Cinquième menu "Choisissez un logiciel" -->
<div class="menu-container">
    <label for="cinquiemeMenu">Choisissez un logiciel :</label>
    <select id="cinquiemeMenu" onchange="telechargerLogiciel()"></select>
</div>
 
<!-- Zone de téléchargement -->
<div id="zoneTelechargement"></div>
 
<!-- Script pour charger les scripts en fonction de l'option sélectionnée -->
<script>
    function choisirScript() {
        var siteMenu = document.getElementById("siteMenu");
        var selectedValue = siteMenu.value;
 
        var scriptSrc = "";
 
        switch (selectedValue) {
            case "ScriptCommun":
                scriptSrc = "ScriptCommun.js";
                break;
            case "scriptSite1":
                scriptSrc = "scriptSite1.js";
                break;
            case "scriptSite2":
                scriptSrc = "scriptSite2.js";
                break;
            // Ajoutez d'autres cas pour d'autres options si nécessaire
        }
 
        if (scriptSrc !== "") {
            var scriptElement = document.createElement("script");
            scriptElement.src = scriptSrc;
            document.body.appendChild(scriptElement);
        }
    }
</script>
</body>
</html>

Et dans le d"bugger de FF il me met: " Uncaught SyntaxError: expected expression, got '<'"
pourtant les noms des JS sont bons, je n'ai ps de balise "<scritp> dans les js....

Si quelqu’un à une idée

Merci

**ProgElecT** · 07/02/2024, 09h17

Salut

Rien à voir, mais dans le switch (selectedValue) { tu as deux fois le même case "scriptSite1": menant à deux script javascript différents.

Si je comprend bien c'est au moment du choix que l'erreur apparait, non pas au lancement du programme car chez moi le code que tu nous as mis ne provoque pas d'erreur chez moi.
Personnellement je passerai au validateur les trois scripts selectionnable par le switch

**draidius** · 07/02/2024, 11h41

Bonjour ProgElecT

Oui j'ai vue après avoir posté mais même en corrigeant ça ne change rien, les JS ne se déclenchent pas :/

mais en fait dans les JC? c'est un code assez compliqué ( pour moi ) et peut être que j'ai des problèmes avec les fonctions par site, car quand je mets le code directement dans le html ça fonctionne, mais je voulais le rendre modulable car chaque site n'a pas besoin d le même chose...

:/

Le valideur n'a rien trouvé de bloquant, mais en tout cas merci pour le lien car je ne connaissais pas

**unanonyme** · 07/02/2024, 13h41

problème d'url ? scriptSrc = "ScriptCommun.js"; résout une url qui affiche une 404 codée en HTML, d'où le message d'erreur autour du signe <

**draidius** · 07/02/2024, 13h43

non il ne se passe simplement rien..

**unanonyme** · 07/02/2024, 13h52

c'est trop laconique.

ça charge le script, mais le script n’exécute rien ? Il n'y a plus d'erreurs ?

Sinon, on peut déjà simplifier un peu, même si ça ne changera rien.

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function choisirScript() {
  var siteMenu = document.getElementById("siteMenu");
  var selectedValue = siteMenu.value;
  if (!selectedValue) {
    return;
  }
 
  var scriptSrc = selectedValue + ".js";
 
  var scriptElement = document.createElement("script");
  scriptElement.src = scriptSrc;
  document.body.appendChild(scriptElement);
}

**ASCIIDEFOND** · 10/02/2024, 10h03

Salut draidius,

Une autre simplification

Code html :

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
<body>
...
    <!-- Premier menu "Choisissez un site" -->
    <div class="menu-container">
        <form autocomplete="off">
            <label for="siteMenu">Choisissez un site :</label>
            <select id="siteMenu" onchange="choisirScript(this.value)">
                <option value="" selected>--Liste des sites--</option>
                <option value="ScriptCommun">Logiciels communs</option>
                <option value="scriptSite1">Site1</option>
                <option value="scriptSite2">Site2</option>
            </select>
        </form>
    </div>
...
    <script>
        function choisirScript(sCript) {
            let eleTagName = document.querySelectorAll("script") // on répertorie tous les tags "script"
            for (let eLement of eleTagName) { // On bloucle les tags
                if (eLement.src) { // Si le tag contient un attribut src
                    if (eLement.src.search(`${sCript}`) > 0) { //Si la valeur du src contient déjà le nom du fichier (sCript), alors on sort
                        return
                    }
                }
            }
 
            if (sCript) document.body.appendChild(document.createElement('script')).src = `${sCript}.js`
        }
 
    </script>
</body>

**unanonyme** · 10/02/2024, 12h34

très bonne remarque. ça évitera charger deux fois le même script.

On peut carrément utiliser

Code :

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

document.querySelectorAll(`script[src*='${sCript}']`).length

https://developer.mozilla.org/en-US/...bute_selectors
https://developer.mozilla.org/fr/doc...odeList/length

**NoSmoking** · 10/02/2024, 16h27

Bonjour,
on peut également supprimer la value de l'<option> une fois le script chargé ce qui évite la re-sélection.

**draidius** · 12/02/2024, 19h24

Merci à tous, au moins maintenant ça fonctionne.

Liste de choix et chargement script JS

JavaScript

Discussions similaires

Partager

Partager