Discussion :

[malabarbe]

Bonjour à tous,

Je n'arrive pas a mettre des attributs sur une chaine contenant des variables

Avec document.write, cela fontionne, mais pas avec :

Code :

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

1
2
 
mon_objet = "<span style='font-size: 16 ;'>***Vous avez saisis "*+ nb_c + "*Courses sur "+jj_total+"</span>";

J'aurais voulu comme résultat :

Vous avez saisis 3 Courses sur 7

[SpaceFrog]

Code :

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

1
2
3
4
mon_objet = document.createElement('span');
mon_objet.style.fontSize="16px";
mon_objet.innerHTML="Vous avez saisi "+ nb_c + " Courses sur "+jj_total;
doucment.body.appendChild(mon_objet);

[malabarbe]

Bonjour SpaceFrog,

Non, cela ne va pas plutot que 16px, le texte passe en 5px (environ) !

Et a quoi sert : doucment.body.appendChild(mon_objet); ?

[SpaceFrog]

Code :

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

1
2
3
4
5
6
nb_c=3;
jj_total=7
mon_objet = document.createElement('span');
mon_objet.style.fontSize="16px";
mon_objet.innerHTML="Vous avez saisi "+ nb_c + " Courses sur "+jj_total;
document.body.appendChild(mon_objet);

désole document pas doucment !

[malabarbe]

Ok, la taille est bonne

Mais le texte au lieu de s'afficher dans le div, s'affiche en dehors de celui-ci !

J'ai essayé de remplacer document par l'ID du div mais sans résultat.

[SpaceFrog]

Code :

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

document.getElementById('iddudiv').appendChild(mon_objet);

[malabarbe]

Hélas,

Le texte est bien revenu dans le div

Mais le texte passe en 5px (environ) !

Comprends pas...

[SpaceFrog]

tu dois avoir un style prédominent sur la blaise mère

mets un style css sur la balise mère


ou modifie le style àprès insertion:

Code :

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

1
2
3
4
5
6
7
nb_c=3;
jj_total=7
mon_objet = document.createElement('span');
mon_objet.id="foo"
mon_objet.innerHTML="Vous avez saisi "+ nb_c + " Courses sur "+jj_total;
document.getElementById('iddudiv').appendChild(mon_objet);
document.getElementById('foo').style.fontSize="16px"

[malabarbe]

En tenant compte de vos dernières suggestions,

La taille est bonne

Mais le div m'affiche [Object]

Si je sort le texte du div, j'ai bien le texte et la bonne taille !

[malabarbe]

Bon, a force de bidouiller, j'ai réussi pour la taille, et je suppose que pour le bold cela doit être pareil.

J'ai remplacé :

Code :

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

1
2
3
 
mon_objet = "<span style='font-size: 16 ;'> Vous avez saisi "+ nb_c
 + "Courses sur "+jj_total+"</span>";

Par :

Code :

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

1
2
3
 
mon_objet = "<span style='font-size: 22px ;'> Vous avez saisi "+ nb_c
 + "Course sur "+j_total;

Mettre toute la chaine en couleur ne devrais pas poser de problèmes, mais ne mettre qu'un morceau de la chaine en rouge (les nombres) cela, je ne vois pas comment faire.

PS : Pour saisis --> saisi, j'avais un doute depuis ce matin (bien vu)

[SpaceFrog]

en restant sur l'insertion en innerHTML (au pied de biche) :

Code :

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

1
2
mon_objet = '<span style="font-size: 22px ;"> Vous avez saisi <span style="color:red">'+ nb_c
 + '</span>Course sur <span style="color:red">'+j_total+'</span>';

[malabarbe]

Ok, merci, c'est bon

Mais pourquoi (au pied de biche) ?

Cela voudrais dire au forcing ?

Si oui, pourquoi ?

[SpaceFrog]

Parceque en utilisant innerHTML pour mettre des objets dans la page il y a un risque selon les navigateurs que ces objets ne rentrent pas correctement dans le DOM.
Malgré le nom de la methode pour moi innerHTML ne doit pas servir à inserer du code HTML mais uniquement du texte.
Bien que de nombreux sites de renommée utilisent cette technique, je la déconseille fortement, en tout cas elle ne m'a apporté que des soucis pour l'utilisation pas le DOM des objets ainsi insérés !

[malabarbe]

Bonjour SpaceFrog,

Ok pour ces précisions, je vais essayer de remédier a cela.

En tout cas, Merci pour ton aide et tes conseils.

@ +