Discussion :

[Alba.1337]

Bonjour à tous!!

J'ai pas touché à js depuis un petit moment, et je tombe sur un problême qui, je pense m'aurait paru simplissime il y a quelque temps...

J'ai dans ma page des div comme ceci :

Code :

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

1
2
 
<div class="message" onlick="display()"><p> titre </p><p> corps du message</p></div>

J'ai dans ma feuille de style :

Code :

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

1
2
3
4
 
.message:nth-child(2){
  display : none;
}

Je souhaite donc avoir une fonction javascript qui, lorsque je clique sur ma div, affiche le "corps du message". J'ai donc fait ceci :

Code :

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

1
2
3
4
5
6
7
8
9
 
function display(){
  var msg=this.childNodes[1];
  if(msg.style.display == 'none'){
      msg.style.display='block';
  }else{
     msg.style.display='none';
  }
}

Et ce code n'a strictement aucun effet!
S'il vous plait, quelqu'un peut il m'expliquer pourquoi, et m'aider à résoudre mon problème?

Merci beaucoup en tout cas.

[Alba.1337]

Le problème doit venir de ma manière de modifier les css...
Puis que si je mets :

Code :

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

1
2
3
4
 
function display(){
  alert("coucou");
}

Ca fontionne, mais si par exemple je fais :

Code :

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

1
2
3
4
 
function display(){
  this.style.color='red';
}

une fois encore rien ne se passe...
help

[NoSmoking]

Bonjour,
plusieurs erreurs se sont glissées dans ton code

<div class="message" onclick="display()">

ensuite dans ta fonction display, pas très heureux comme nom de fonction d'ailleurs, le this est en fait l'objet window, dans ton cas il te faut passer en paramètre l'objet cliqué, le this

Code :

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

<div class="message" onclick="displayMsg(this)">

et dans ta fonction utiliser celui ci

Code :

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

1
2
3
4
5
6
7
8
function displayMsg( obj){
  var msg=obj.childNodes[1];
  if(msg.style.display == 'none'){
      msg.style.display='block';
  }else{
     msg.style.display='none';
  }
}

[Alba.1337]

Bonsoir, et merci de votre réponse!

Alors, désolé pour le c manquant sur "onclick" c'est parce que j'ai recopié à la main... Mais il était bien présent dans mon code.

Je me permets de poster la <div> à modifier dans mon code :

Code :

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

1
2
3
4
5
 
		<div class=message onClick="displayMsg(this)"><p><?php echo '<a href="'.$url.'recherche.php?pseudo='.$msg[1].'">'.$msg[1].'</a>
                -  '.date('d/m/y h:i:s', strtotime($date));?></p>
		<?php echo '<p>'.$msg[0].'</p>'; ?>
		</div>

Je souhaite donc que la partie "<?php echo '<p>'.$msg[0].'</p>'; ?>", n'apparaisse que lorsque je clique sur la <div> de class "message"...

J'ai donc la fonction javascript suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
	function displayMsg(obj)
	{
	  var msg=obj.childNodes[1];
	  if(msg.style.display == 'none'){
	      msg.style.display='block';
	  }else{
	      msg.style.display='none';
	  }
	}

... Mais toujours rien ne se passe.
Je suis sur ce site depuis 8h du matin! Ca devient dur

merci de votre aide!

[NoSmoking]

normal, il y a une subtilité... ce ne serait pas marrant sans

comme tu généres ton code via PHP inséres directement dans la balise P style="display:none"

Code php :

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

<?php echo '<p style="display:none">'.$msg[0].'</p>'; ?>

[Alba.1337]

Merci encore de t'occuper de moi ^^

J'ai donc cette fois :

Code :

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

1
2
3
4
5
 
<div class=message onClick="displayMsg(this)"><p><?php echo '<a href="'.$url.'recherche.php?pseudo='.$msg[1].'">'.$msg[1].'</a>
-  '.date('d/m/y h:i:s', strtotime($date));?></p>
<?php echo '<p style="display:none">'.$msg[0].'</p>'; ?>
</div>

et

Code :

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

1
2
3
4
5
6
7
8
9
10
 
	function displayMsg(obj)
	{
	  var msg=obj.childNodes[1];
	  if(msg.style.display == 'none'){
	      msg.style.display='block';
	  }else{
	      msg.style.display='none';
	  }
	}

... Et toujours rien.
Je comprends vraiment pas...

[NoSmoking]

... Et toujours rien.
Je comprends vraiment pas...

maintenant observes la construction de ton document,

<P><A>....</A></P><P>...</P>

mais ce n'est pas ce que voit les navigateurs, cela doit marcher sous IE mais pas sous FireFox qui voit ton document comme cela

<P><A>....</A></P>#text
<P>...</P>

ou pas loin.

La solution est que tu obtiennes ton code sur la même ligne, sans retour à la ligne pour ne pas avoir des #text sous FireFox

Autre solution est le changement de récupération de l'élément à masquer/afficher

Code :

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

1
2
3
4
5
6
7
8
9
function displayMsg( obj){
//  var msg=obj.childNodes[1];
  var msg=obj.getElementsByTagName('P')[1]; // récup. du 2éme P
  if(msg.style.display == 'none'){
      msg.style.display='block';
  }else{
     msg.style.display='none';
  }
}