Création d'une popup sur le onclick

**alexis_c** · 13/07/2022, 09h02

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

**mathieu** · 13/07/2022, 12h33

le message "pret:" ne s'affiche pas parce que le code n'entre pas dans le "if".

je ne comprend pas ce que vous voulez tester avec "readyState", regardez peut-être la documentation là :
https://developer.mozilla.org/fr/doc...ent/readyState

**alexis_c** · 13/07/2022, 13h01

Avec readyState j’essaie de m'assurer que la ligne : conteneur.innerHTML = Console_html; soit prise en compte dans le dom pour pouvoir travaille dessus.
Pour la doc , oui merci mais visiblement je ne parvient pas encore a comprendre comment cela fonctionne.

**alexis_c** · 13/07/2022, 13h30

En répondant a la question précédente,
j'ai remplacé document.readyState == "interactive" par conteneur.innerHTML != '', et dé-commenté ma boucle for, et Hop ça marche.
Je passe donc en résolu.
Cependant si quelqu'un à des précisions a m'apporté qu'il n'hésite pas...

Création d'une popup sur le onclick

JavaScript

Discussions similaires

Partager

Partager