Incorporer des variables dans un code javasript

**patdu26** · 12/10/2022, 19h59

bonjour à tous,

je désire, grâce à un menu opérationnel, présenter une liste de leçons, cliquables par un lien.
J'ai réalisé cela en html et ccs. cela fonctionne mais je m'aperçois que le code est pratiquement identique pour chaque leçon. En fait, la structure et la mise en forme sont identiques pour chaque leçon, seuls changent les titres, l'entier "i" et les liens.
j'ai donc fait un lien générique en javascript que je souhaite faire évoluer dans une boucle avec l'entier "i":

Code :

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

1
2
3
4
5
6
7
8
9
// ATTENTION UTILISER LES CARACTERES BACKTICK DE WINDOWS : ALTGR + TOUCHE 7 DU CLAVEIR ALPHANUMERIQUE
      const mon_test =       
                  ` <a href=ref>
                        <div class="libellé change fin" onmouseenter =  "show_vignette(i)" onmouseleave=" kill_vignette()">
                              titre
                        </div>
                  </a>`
 
      document.querySelector(".sec .nav3").insertAdjacentHTML("beforeend", mon_test);

Cela fonctionne uniquement en interprétant l'ensemble comme une chaine, ce qui semble hélas vrai, et rien ne peut être indexé à un paramètre.
En effet, mon "i" est tout le temps interprété comme une lettre "i" et non comme une variable dans une chaine.
De plus le "titre" est interprété comme la chaine contenant "titre" et non comme une variable que je veux faire évoluer, tout comme i, pour construire un lien spécifique à chaque passage d'une boucle.

Quelle est l'astuce pour intégrer des variables, qui seront interprétées comme telles, et non comme des simples mots invariables dans mon code??

Merci à ceux qui prendront la peine de m'aiguiller un peu.....

**melka one** · 12/10/2022, 20h31

jour

il faut faire une concaténation

remplace i par ${i}

**mathieu** · 12/10/2022, 20h37

pour créer des balises, vous pouvez utiliser cela :
https://developer.mozilla.org/fr/doc.../createElement

cela vous permet d'attacher les évènements dans le code comme cela par exemple :

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
 
<div id="contenu"></div>
 
<script>
"use strict";
 
console.clear();
 
 
const elements = [
        {
                "code" : "element1",
                "libelle" : "Titre <1er> élément",
                "href" : "https://lien1",
        },
        {
                "code" : "element2",
                "libelle" : "Titre 2e élément",
                "href" : "https://lien2",
        },
        
];
 
const div_contenu = document.getElementById("contenu");
 
 
elements.forEach(element => {
        
        // création de la balise du titre
        const titre = document.createElement("div");
        titre.classList.add(element["code"]);
        titre.textContent = element["libelle"]
        
        // création de la balise du lien
        const lien = document.createElement("a");
        lien.setAttribute("href", element["href"]);
        
        
        // gestion des évènements de la balise du lien
        
        lien.addEventListener("mouseenter", e => {
                
                console.log("entrée " + element["code"]);
                
                
        });
        
        lien.addEventListener("mouseleave", e => {
                
                console.log("sortie " + element["code"]);
                
                
        });
        
        
        // ajout des balises à leurs parents
        lien.appendChild(titre);
        div_contenu.appendChild(lien);
        
        
});
 
 
</script>
 
 
</body>
 
</html>

**patdu26** · 13/10/2022, 15h40

Merci à tous les deux pour vos propositions, cela m'a beaucoup aidé à avancer!
A la prochaine, pour d'autres interrogations sur javascript que je découvre peu à peu...

Incorporer des variables dans un code javasript

JavaScript

Discussions similaires

Partager

Partager