Javascript/CSS Afficher ou masquer un element HTML avec GetElementByID
Introdution � GetElementById
Article deprécié, voir : http://sahid.funraill.org/2008/08/25/fade-in-fade-out-with-javascript-and-prototypejs/
Le formulaire html, est un des seuls moyen d’intéractivité entre le visiteur et votre site internet, l’heure du Web 2.0 et de l’objet XMLHttpRequest est au rendez vous pour rendre vos formulaires attratifs, Mais avec de simples petits scripts on peut s’amuser � rendre notre formulaire plus fonctionnel.
Afficher un Element ou le masquer � partir d’une liste
Voir l’exemple “Afficher ou masquer un element HTML avec GetElementByID”
Code HTML
Pour cet exemple on se sert de la balise
� laquelle on donne un id et un style css
-
display:none
(on aurait bien pu utiliser n’importe quelle balise qui admet un atribut id), le style css
-
display:none
permet de cacher l’élément
.
Pour changer le style css de notre label portant l’id “hello”, on va créer une simple fonction javascript, et pour lancer cette fonction, on va utiliser la méthode
sur une simple liste html portant id “choix”.
Notre fonction javascript
-
<script type=“text/javascript”>
-
function change(){
-
var choix = document.getElementById(‘choix’);
-
if(choix.value == ‘affiche_pas’){
-
document.getElementById(‘hello’).style.display = ‘none’;
-
}
-
if(choix.value == ‘affiche’){
-
document.getElementById(‘hello’).style.display = ‘block’;
-
}
-
}
-
</script>
En premier on récupÚre la valeur envoyée par notre liste, on la compare.
Si la valeur envoyée est égale � “afficher”, on change le style de notre label portant l’id “hello” � la volée en utilisant une fois de plus GetElementById
-
document.getElementById(‘hello’).style.display = ‘block’;
Ceci n’est qu’un simple exemple, on pourrait valider les champs de nos formulaires en affichant une image “valide” � chaque champs rempli correctement, ou encore changer le style de la balise
-
input
, quand celle-ci est remplie correctement.
Tableau de bord
5 avril 2007 at 18:00
ok, pas mal ce script
mais seulement moi je cherche à ce que ce script marche si on à plusieurs fois ce script qui s’affiche (boucle), “choix” devra donc s’incrementer et la est mon problême
comment faire pour faire fonctionner ce script avec une incrementation !
merci de me repondre à newlc@club-internet.fr
merci