Changement de couleur du texte dans un innerHTML

Version imprimable

Bonjour, j'aimerais changer la couleur du texte de la variable pseudo sans changer la disposition de la ligne, voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
document.getElementById('envoyer').addEventListener('click', () => {
     var input = document.getElementById("pw2");
     var text = input.value;
 
     var d = new Date();
     var n = d.toLocaleDateString();
     var d1 = new Date();
     var n1 = d1.toLocaleTimeString();
 
     var pseudo = <?php echo json_encode($pseudo); ?>;
 
 
     document.getElementById("message" ).innerHTML += '<br>'+pseudo+'<br>'+text+'<br>'+n+'&nbsp;&nbsp;&nbsp;' +n1+'<br>';
 
});

26/12/2019, 17h30
ProgElecT

Salut

Le pseudo en rouge

Code:

document.getElementById("message" ).innerHTML += '<br><span style="color:red">'+pseudo+'</span><br>'+text+'<br>'+n+'   ' +n1+'<br>';
26/12/2019, 17h47
pascb423

avant j'avais les 3 textes l'un sous l'autre et quand j'appuye sur un bouton pour afficher un autre bloc il s'affiche sous le précédent et avec votre proposition le bloc de texte supplémentaire s'affiche en horizontal?

1 pièce(s) jointe(s)

Re
:calim2:, il doit y avoir eu un changement autre que ma proposition, je viens de le vérifier à nouveau, chaque ajout provoque un saut de ligne , une ligne blanche puis 3 lignes l'une sous l'autre.

Pièce jointe 526701
Code:

1 2 3 4 5 6 7 8 9 function truc(){ var d = new Date(); var n = d.toLocaleDateString(); var d1 = new Date(); var n1 = d1.toLocaleTimeString(); let pseudo="ICIlePseudo"; let text="Aque coucou"; document.getElementById("message" ).innerHTML += '<br><span style="color:red">'+pseudo+'</span><br>'+text+'<br>'+n+'   ' +n1+'<br>'; }

26/12/2019, 18h18
pascb423

je vous remercie, je vais regarder ce qu'il y a de différent
26/12/2019, 18h28
pascb423

c'est peut être parce que j'affiche dans une div?

voilà la div dans laquelle j'affiche:

Code:

1
2
3
4
5
6
<div   class='container-fluid'>   
    <div class=" col-md-5" style=" margin: 0 auto; width: 100%;  ">
        <button type="button" class="btn btn-success">Posez une question</button>
  <div id="message" class="nav nav-pills nav-stacked" style="height: 300px; overflow-y: scroll; border: 1px solid black;">
 
</div>

26/12/2019, 18h39
ProgElecT
Citation:

Envoyé par pascb423

c'est peut être parce que j'affiche dans une div?

Non,
Code:

1 2 <button id="btn9" onclick="truc()">etude pour DVP</button> <div id="message"> essais d'ajout</div>
A moins qu'un style soit appliqué à div mais lequel, et pourquoi cela n'arriverai pas dés le départ?

C'est juste l'ajout du span qui modifie le formatage ?, si tu retourne à ton premier code, le message ce fait sur plusieurs lignes ?
26/12/2019, 18h52
pascb423

oui, si je retourne au premier code ca affiche comme vous c'est l'ajout du span qui chamboule? je vais essayer de modifier la div c'est peut etre le col-md5 qui passe pas?
26/12/2019, 19h00
pascb423

c'était la classe de la div message qui modifiait la structure, j'ai enlever cette classe et c'est parfait, merci encore

Bonjour,

ta structure HTML/Bootstrap n'est pas correcte : il manque <div class="row">.

Bootstrap - Grid system

Code:

1
2
3
4
5
6
7
8
9
10
<div class="container-fluid">   
  <div class="row">   
    <div class="col-md-5" style=" margin: 0 auto; width: 100%;  ">
 
      <button type="button" class="btn btn-success">Posez une question</button>
      <div id="message" class="nav nav-pills nav-stacked" style="height: 300px; overflow-y: scroll; border: 1px solid black;"></div>
 
    </div>
  </div>
</div>