Discussion :

[produnet]

Bonsoir,
J'ai du mal à terminer un programme javascript, et je voudrais savoir comment avoir dans une fonction, le code utile pour créer des divs sur ma page avec chacun un id.

Merci de votre réponse !


Edit :
Ou à défaut, un lien vers lequel je pourrais apprendre ça.
Merci !

J'ai cherché sur les tutos javascripts et je n'ai pas trouvé :/

[sekaijin]

Code :

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

1
2
3
4
5
6
var aDiv = document.createElement('div');
aDiv.setAttribute('id', d45); //ici créer un id de son choik
//ajouter le div à la page
document.body.appendChild(aDiv);
//autre solution ajouter le div à un élément dont on connait l'id
documet.getElementById('idcherché').appendChild(aDiv);

A+JYT

[produnet]

Oh merci Sekajin !
Je vais tester ça ce soir !

Merci encore

[produnet]

Grace à ta Solution j'ai pu créer mes 3 DIV, merci beaucoup !

J'ai essayé de mettre un test onMouseOver="inbulle(this.id,this.style.top,this.style.left)" sur chacun des DIV créés, pour envoyer ces trois paramètres (id, top, et left) à la fonction d'info-bulle mais l'infobulle ne reconnait ces paramètres que si ce sont des valeurs numériques, comme 150 pour LEFT par exemple.
Mon but est que l'info-bulle se place toujours au-dessus du DIV sur lequel passe la souris, et en prenant comme position la position du DIV et pas celui de la souris comme je vois souvent dans les scripts d'info-bulles.

Voilà mon code complet qui fonctionne si on le colle dans une page vide :
Mais le déplacement de l'info-bulle ne se fait pas.

Code :

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
var Liste=new Array("voitures","animaux","plantes");
 
var voitures=new Array();
var animaux=new Array();
var plantes=new Array();
 
var choix=0;
var n=0;
 
voitures[0]="Marque Mazda*Couleur Bleue*Prix: 15000*Etat: Neuve*Année: 2013";
voitures[1]="Marque Mercedes*Couleur Noire*Prix: 25000*Etat: Neuve*Année: 2011";
voitures[2]="Marque Renault*Couleur Blanche*Prix: 6000*Etat: Occasion*Année: 2014";
 
animaux[0]="Quadrupède*Biche*Habitat: Bois*Age: 6 ans*Vitesse: Rapide";
animaux[1]="Quadrupède*Mule*Habitat: campagne*Age: 8 ans*Vitesse: lent";
animaux[2]="Bipède*Autruche*Habitat: Australie*Age: 5 ans*Vitesse: Trés Rapide";
 
// Plantes n'est pas encore défini.
 
 
// Fonction d'infobulle pour les 3 liens DIV
 
function inbulle(id,left,top)
{
  switch(choix)
  {
   case 0:fiche=voitures[id].split("*");break;
   case 1:fiche=animaux[id].split("*");break;
   case 2:fiche=plantes[id].split("*");break;
  }
 
  var texte=fiche[2]+"</br>"+fiche[3]+"</br>"+fiche[4];
  document.getElementById("bulle").innerHTML=texte;
 
  document.getElementById("bulle").style.left=left+"px";
  document.getElementById("bulle").style.top=top+"px";
}
 
 
// Fonction qui crée et affiche les 3 liens DIV.
 
function affiche(tableau)
{
var texte="";
for(n=0;n<tableau.length;n++)
  {
   var fiche=tableau[n].split("*");
 
   var aDiv = document.createElement('div');
   aDiv.setAttribute('id', n);
   aDiv.setAttribute('class','liens');
   document.getElementById('affichage').appendChild(aDiv);
 
   //left=aDiv.style.left;
   //top=aDiv.style.top;
 
   left=document.getElementById(n).style.left;
   top=document.getElementById(n).style.top;
 
   aDiv.setAttribute('onMouseOver','inbulle(this.id,left,top)' );
 
   texte=fiche[0]+" : "+fiche[1];
   document.getElementById(n).innerHTML=texte;
  }
 
   document.getElementById("bulle").innerHTML="";
}
 
 
// Fonction saisie lancée par un bouton ou par un champ 'text'.
 
function saisie(valeur)
{
        choix=parseInt(valeur);
 
        switch(choix)
        {
         case 0:affiche(voitures);break; // Affiche le tableau des voitures.
         case 1:affiche(animaux);break; // Affiche le tableau des animaux.
         case 2:affiche(plantes);break; // Affiche le tableau des plantes.
        }
}

Dans le body il y a d'abord un champ text :

Code :

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

<input type="text" id="invite" onchange="saisie(this.value)"></input>

Sous le champ texte se trouve un div contener qui se nomme "affichage", dans lequel je crée les 3 liens DIV.

Dans le code JS, c'est cette ligne qui ne transmet pas les parametres à l'infobulle :

Code :

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

   aDiv.setAttribute('onMouseOver','inbulle(this.id,left,top)' );

[NoSmoking]

Bonjour,

aDiv.setAttribute('onMouseOver','inbulle(this.id,left,top)' );

si tu veux que cela soit pris en compte il te faut créer la chaine avec les valeurs voulues

Code :

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

1
2
var param = 'inbulle("' +this.id +'",' +left +',' +top +')';
aDiv.setAttribute('onmouseover', param );

[EDIT]
Oubli des guillemets autour de this_id qui doit être une chaine!

[sekaijin]

mieux vaut utiliser une fonction car de tout façon le parser JS va transformer la chaine en fonction.

je ne vois jamais l'intérêt de construire une chaine de caractère dynamiquement qui sera évalué pour donner le corps d'une fonction
il est tellement plus simple d'écrire la fonction.
en l'écrivant directement plus de problème de ' et ", on a accès au variable de la portée, on peut aussi capter le paramètres facilement etc.

Code :

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

1
2
3
4
aDiv.onmouseover = function(evt) {
  inbulle(this.id, this.left, this.top);
  console.log(evt);
}

A+JYT

[produnet]

Merci beaucoup pour votre aide !

Je vais vite utiliser ça.
J'ai mis des variables à la place de valeurs directes dans le onmouseOver car j'ai besoin de passer le top et left du DIV créé dynamiquement pour positionner l'infobulle.

Merci encore !!!

[sekaijin]

J'ai mis des variables à la place de valeurs directes dans le onmouseOver car j'ai besoin de passer le top et left du DIV créé dynamiquement pour positionner l'infobulle.

C'est pour ça que j'ai utilisé this.left et this.top. onmouseover étant une méthode du div créé this est une référence au div créé. infobute reçoit donc les valeurs de top et let du div créé.

Code :

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

1
2
3
4
aDiv.onmouseover = function(evt) {
  inbulle(this.id, this.left, this.top);
  console.log(evt);
}

A+JYT

[NoSmoking]

En relisant la discussion je me rend compte que cela est entièrement gérable via le CSS et la pseudo-class :hover.

[produnet]

Merci de la précision^^

Je n'ai pas su utiliser vos astuces, donc je reviens sur le topic :/

Voilà où j'ai placé le code, et l'infobulle ne se déplace pas :

Code :

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
function affiche(tableau)
{
var texte="";
for(n=0;n<tableau.length;n++)
  {
   var fiche=tableau[n].split("*");
 
   var aDiv = document.createElement('div');
   aDiv.setAttribute('id', n);
   aDiv.setAttribute('class','liens');
   document.getElementById('affichage').appendChild(aDiv);
 
   //left=aDiv.style.left;
   //top=aDiv.style.top;
 
   left=document.getElementById(n).style.left;
   top=document.getElementById(n).style.top;
 
//   aDiv.setAttribute('onMouseOver','inbulle(this.id,left,top)' );
 
   aDiv.onmouseover = function(evt)
   {
    inbulle(this.id,this.left, this.top);
    console.log(evt);
   }
 
 
   texte=fiche[0]+" : "+fiche[1];
   document.getElementById(n).innerHTML=texte;
  }
 
   document.getElementById("bulle").innerHTML="";
}

Donc je n'ai sûrement pas su utiliser votre astuce :/

Sinon au passage, une question comme ça, c'est qui le plus rapide à executer ou le moins lourd, c'est de faire en css ou en javascript ?
Parce que je vais utiliser mon programme dans un téléphone portable et je cherche à ce que mon programme soit léger en ressources mémoire et tout.

[sekaijin]

sorry petite erreur de ma part

Code :

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

1
2
3
4
5
6
 aDiv.onmouseover = function(evt)
   {
    var rect = this.getBoundingClientRect();//récupère les coordonnées du div
    inbulle(this.id,rect.left, rect.top);
    console.log(evt);
   }

je n'ai pas compris comment fonctionne ta fonction infobule mais la variable choix n'est pas définie dans cette fonction il y a donc quelque par un effet de bord

si j'ai bien saisi l'utilisateur saisit une valeur et la fonction saisie est appelée.
en fonction de la valeur saisie cette fonction appelle affiche avec en paramètre te tableau à utiliser.

la fonction affiche construit un dis qui devra afficher des infos issues de ce tableau. or le tableau n'est pas transmit à infobule. pas plus que le choix.

je pense qu'il faut ajouter un paramètre à infobule pour lui passer le tableau.

Code :

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
function inbulle(id,left,top, tableau)
{
  fiche=tableau[id].split("*");break;
 
  var texte=fiche[2]+"</br>"+fiche[3]+"</br>"+fiche[4];
  document.getElementById("bulle").innerHTML=texte;
 
  document.getElementById("bulle").style.left=left+"px";
  document.getElementById("bulle").style.top=top+"px";
}
 
 
function affiche(tableau)
{
var texte="";
for(n=0;n<tableau.length;n++)
  {
   var fiche=tableau[n].split("*");
 
   var aDiv = document.createElement('div');
   aDiv.setAttribute('id', n);
   aDiv.setAttribute('class','liens');
   document.getElementById('affichage').appendChild(aDiv);
 
   aDiv.onmouseover = function(evt)
   {
    var rect = this.getBoundingClientRect();//récupère les coordonnées du div
    inbulle(this.id,rect.left, rect.top, tableau);
   }
 
 
   texte=fiche[0]+" : "+fiche[1];
   document.getElementById(n).innerHTML=texte;
  }
 
   document.getElementById("bulle").innerHTML="";
}

ensuite tu as un autre problème tu crée des div en utilisant l'indice du tableau pour l'id. il est déconseiller d'utiliser ds id purement numérique (mais ce n'est très grave). ce qui pose problème c'est que si tu appelles la fonction affiche deux fois tu crées des div qui on le même id.

il te faux trouver un moyen d'avoir des id uniques.
par exemple en utilisant la valeur de saisie

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function saisie(valeur)
{
        var choix=parseInt(valeur);
 
        switch(choix)
        {
         case 0:affiche(voitures, choix);break; // Affiche le tableau des voitures.
         case 1:affiche(animaux, choix);break; // Affiche le tableau des animaux.
         case 2:affiche(plantes, choix);break; // Affiche le tableau des plantes.
        }
}

et l'utiliser ensuite dans affiche

Code :

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
function affiche(tableau, choix)
{
var prefixe = 'id'+choix+'p';
for(n=0;n<tableau.length;n++)
  {
   var id =prefix+n; //l'id est construit à partir du choix et de n 'id'+choix+'p' + n 
   //ce qui donne des chose comme id0p0 id0P1 id1p3 etc.
   var fiche=tableau[n].split("*");
   var texte=fiche[0]+" : "+fiche[1];
 
   var aDiv = document.createElement('div');
   aDiv.setAttribute('id', id);
   aDiv.setAttribute('class','liens');
   aDiv.innerHTML=texte; 
   aDiv.onmouseover = function(evt)
   {
    var rect = this.getBoundingClientRect();//récupère les coordonnées du div
    inbulle(this.id,rect.left, rect.top, tableau);
   }
   document.getElementById('affichage').appendChild(aDiv);
  }
 
   document.getElementById("bulle").innerHTML="";
}

Il n'est pas très efficace d'utiliser des switch mieux vaut utiliser un tableau

Code :

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
//on utilise un tableau de tableau
//data [voitures, animaux, plantes] où voitures, animaux, et plantes sont des tableaux
var data [
  //voitures
  [
    "Marque Mazda*Couleur Bleue*Prix: 15000*Etat: Neuve*Année: 2013",
    "Marque Mercedes*Couleur Noire*Prix: 25000*Etat: Neuve*Année: 2011",
    "Marque Renault*Couleur Blanche*Prix: 6000*Etat: Occasion*Année: 2014"
  ],
  //animaux
  [ 
    "Quadrupède*Biche*Habitat: Bois*Age: 6 ans*Vitesse: Rapide",
    "Quadrupède*Mule*Habitat: campagne*Age: 8 ans*Vitesse: lent",
    "Bipède*Autruche*Habitat: Australie*Age: 5 ans*Vitesse: Très Rapide"
  ],
  //Plantes n'est pas encore défini.
  [
  ]
];

de la sorte data[0] est un tableau de voitures data[1] un tableau d'animaux et data[2] un tableau de plantes la fonction saisie devient

Code :

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

1
2
3
4
5
6
7
8
function saisie(valeur)
{
  var choix=parseInt(valeur);
  //affiche(data[0], 0); => affiche(voitures, 0);
  //affiche(data[1], 1); => affiche(animaux, 1);
  //affiche(data[2], 2); => affiche(plantes, 2);
  affiche(data[choix], choix);
}

de façon générale évite les variable globales (définies dans le script) utiliser des variable locales à tes fonctions et les paramètres.

il te reste un dernier point
c'est que si l'utilisateur saisi deux fois la même valeur tu ajoute deux fois les divs.
pour l'éviter dans la fonction affiche avant de créer le div fait un un document.getElementById(id); si la valeur retournée est un div c'est qu'il a déjà été créé sinon il faut le créer.

A+JYT

[produnet]

Merci beaucoup Sekajin !

J'ai appris pas mal de trucs dans tes explications, je vais essayer de mettre tout ça en place ce soir

Le but de mon programme :

Le visiteur saisie une valeur choix qui est par exemple "voiture" et le programme crée un DIV pour chaque enregistrement contenu dans le tableau des voitures.
(Un tableau fait en splitant une chaine voitures déclarée en début du script JS).

Ainsi s'il y a 3 voitures dans le tableau voitures alors chaque DIV créé affichera les enregistrements 0 et 1 du tableau voitures (c'est à dire deux infos concernant chaque voiture du tableau).
C'est seulement le onMouseOver sur le DIV qui affichera dans un infobulle les enregistrements 2, 3, et 4 du tableau voitures (le reste des infos de la voiture) mais seulement pour la voiture indiquée par le onmouseOver (d'où le id du div que je transmets).