Création d'une popup sur le onclick
Bonjour,
Je suis débutant en javascript.
J’essaie de crée une infobull ou un popup sur un évènement click à partir d'élément généré, et je me confronte à des difficultés que je n'arrive pas à solutionner. Pouvez vous m'aider ?
Voici le code que j'utilise pour essai:
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
<style>
.Visu_message {
border : 2px solid black;
background: white;
color: black;
}
.Visu_bull {
display: none;
z-index: 10;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color:Lemonchiffon;
color:blue;
border-radius:1px;
transition: .5s all;
transition-delay: 5s;
}
.Visu_bull_display{
display: block;
transition-delay:1s;
}
</style>
</head>
<body>
<header></header>
<main>
<div id="service">
</div>
<div id="mess_html" class="Visu_message">message html</div>
<div id="info_html" class="Visu_bull">infobull html</div>
<div id="mess"></div>
<div id="mess2"></div>
</main>
<footer></footer>
</body>
<script type="text/javascript" >
let conteneur=document.getElementById('service');
const expr1='message principal n°1';
const bull1='message infobulle n°1';
const expr2='message principal n°2';
const bull2='message infobulle n°2';
var dinfobull = {1:[false,null,null],2:[false,null,null]};// suivi des infobull créé clée = id infobull valeur = [display,cont_principal,cont_infobulle]
let Console_html=`<div id="VisuErr_textL_id_1" class="Visu_message">${expr1}
<div id="VisuErr_bull_id_1" class="Visu_bull">${bull1}</div>
</div>
<div id="VisuErr_textL_id_2" class="Visu_message">${expr2}
<div id="VisuErr_bull_id_2" class="Visu_bull">${bull2}</div>
</div>`;
conteneur.innerHTML = Console_html;
function click_infobull(id){
//Fonction pour affiché des infobulles sur des elements générés
if (dinfobull[id][0] == false){
dinfobull[id][0] = true;
dinfobull[id][2].classList.add(`Visu_bull_display`);
}
else {
dinfobull[id][0] = false;
dinfobull[id][2].classList.removeClass(`Visu_bull_display`);
}
}
let cont_mess=document.getElementById("mess");
let cont_mess2=document.getElementById("mess2");
//Test sur html
var affiche = false;
var cont_html=document.getElementById("mess_html");
cont_html.onclick = function() { click_hml(); };
function click_hml(){
//Fonction pour affiché des infobulles sur du html
let cont_infohtml=document.getElementById("info_html");
if (affiche == false){
affiche = true;
cont_mess.innerHTML=affiche;
cont_infohtml.classList.add(`Visu_bull_display`);
}
else {
affiche = false;
cont_mess.innerHTML=affiche;
cont_infohtml.classList.remove(`Visu_bull_display`);
}
}
//Test sur généré
let mess=Object.keys(dinfobull);
let mess2 = `x: `;
if (document.readyState == "interactive"){
mess2 = 'pret:'+mess2 ;//+ '->';
cont_mess2.innerHTML=mess2;
/* for (let x in dinfobull){
mess2 = x ;//+ '->';
dinfobull[x][1]=document.getElementById("VisuErr_textL_id_"+x);
dinfobull[x][2]=document.getElementById("Visu_bull_id_"+x);
dinfobull[x][1].onclick = function() { click_infobull(x); };
dinfobull[x][2].onclick = function() { click_infobull(x); };
// mess2 += "VisuErr_textL_id_"+x+'->'+dinfobull[x];
}
*/ }
cont_mess.innerHTML=mess+JSON.stringify(dinfobull);
/*
*/
</script>
</html> |
Le but de mes essais est de parvenir a créé un popup permettant différent information en fonction de l'élément ayant provoqué l'ouverture.
Dans mon code la partie problématique est :Test sur généré. J'aimerai réussir a affiché message infobulle n°1 et n°2.
Je ne comprend pas pourquoi mess2 = 'pret:'+mess2 ; ne s'affiche pas.
J'ai posé la ligne : document.readyState == "interactive" car je suppose que les lignes dinfobull[x][1]=document.getElementById("VisuErr_textL_id_"+x); retourne getElementById = null parceque ces element on été généré.
Pouvez vous me guidé vers les bonne pratique et m'aidez a comprendre ce que je fais mal?
