11550 sujets

JavaScript, DOM et API Web HTML5

Problème avec l'utilisation de "getElementsByClassName"

Bonjour à tous,

Je souhaites faire un petit script permettant de faire disparaître une boite "div".
Voici où j'en suis : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<script type="text/javascript">
//<![CDATA[ 
function display()
{
	document.getElementsByClassName('test').style.display='none';
}
//]]>
</script> 

</head>

<body>
	<div class="test" style="width:200px; height:200px; background-color:red;"></div>
	<a href="#" onclick="display()">go</a>
</body>

</html>


Ce script fonctionne très bien si j'utilise "getElementById" (et que donc ma balise "div" est identifiée grâce à "id" et non "class").
Mais comme j'ai en réalité plusieurs balises à faire disparaître en même temps, je suis obligé de passer par des "class" et donc par "getElementsByClassName" comme c'est le cas dans mon exemple ci-dessus.
Malheureusement, ça ne fonctionne pas. Smiley confus

Est-ce que quelqu'un pourrait me conseiller ?

D'avance un tout grand merci.
Bonjour, selon les navigateurs, la fonction getElementsByClassName n'existe pas (si elle n'existe pas, il faut la rajouter.
De plus, elle retourne un tableau d'éléments (d'où le S à Elements). Il faut alors que tu fasses une boucle sur ces éléments pour changer leur style.
J'ajouterais que si tu souhaites te simplifier la vie, tu peux exploiter un framework javascript, qui met ce genre de fonctions à disposition du développeur.
Typiquement, avec jQuery, ta fonction display pourrait se présenter sous cette forme :

$('test').css("display", 'none');
Garde ton getElementById si ça fonctionne et passe lui en paramètre id$i

$i serait la valeur incrémentée de ta boucle pour afficher tout tes div Smiley cligne

C'est ce que j'ai perso pour faire la même chose que toi et ça fonctionne nickel.

Le javascript :

/**************************************************************************
* switchMenu(obj) : Permet de cacher / afficher un div                    *
**************************************************************************/
function switchMenu(obj)
{
  var el = document.getElementById(obj);
  if(el.style.display != "block")
  {
    el.style.display = "block";
  }
  else
  {
    el.style.display = "none";
  }
}


Le php qui appelle le script :

<a href='#DivModif$id' onclick=\"switchMenu('DivModif$id')\"><img src='$Repertoire_Images_Gifs/modifier.gif' title='Modifier' alt='Modifier' /></a>


Le div qui est caché au chargement de la page :
<div id='DivModif$id' style='display:none'>texte</div>


En espérant que ça t'aide Smiley smile
Sujet clos
Aller à