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