Incorporer des variables dans un code javasript

Version imprimable

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:

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

12/10/2022, 20h31
melka one

jour

il faut faire une concat�nation

remplace i par ${i}

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:

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>

13/10/2022, 15h40
patdu26

Merci!

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