11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je voulais savoir, comment peut-on cacher un simple "<div>" en JavaScript ? Et une fois qu'on clique sur un bouton (du genre "Envoyer"), le div s'affiche et on remonte en haut de la page ? C'est possible ?

Pour l'instant, en JavaScript j'ai trouvé ça :

<script type="text/javascript">
function toggle(anId)
{
    node = document.getElementById(anId);
    if (node.style.visibility=="hidden")
    {
        // Contenu caché, le montrer
        node.style.visibility = "visible";
        node.style.height = "auto";         // Optionnel rétablir la hauteur
    }
    else
    {
        // Contenu visible, le cacher
        node.style.visibility = "hidden";
        node.style.height = "0";            // Optionnel libérer l'espace
    }
}
</script>


Et pour mon div en HTML :

<div id="msgerreur">Il y a au moins une erreur dans le formulaire</div>


Puis j'ai mon bouton qui fait appel à la fonction ici :

<input type="submit" name="envoyer" id="submit" value="Envoyer" onclick="toggle('msgerreur')" />


Le problème que j'ai actuellement c'est qu'il faut cliquer 2 fois sur "Envoyer" pour qu'il disparaisse... Quelqu'un a une solution ? Merci.
PS : Je connais pas grand chose (presque rien) en JS ^^'
Modifié par DarkFolio (23 Feb 2013 - 13:58)
Bonjour DarkFolio,

Je ne suis pas certain de bien comprendre, mais tu peux cacher ton div au départ au moyen de ta feuille de style. Puis, lors du clic sur "Envoyer", tu l'affiches au moyen d'une fonction javascript.

DarkFolio a écrit :
Le problème que j'ai actuellement c'est qu'il faut cliquer 2 fois sur "Envoyer" pour qu'il disparaisse...

Cela est dû, je pense, au double test demandé par le "if(){...}else{...}" de ta fonction "toggle(...)".

Pour afficher le div, il suffirait de ceci :
<input type="submit" id="submit" value="Envoyer" onclick="afficher('msgerreur');return false;" />

et le js :
		function afficher(DivId)
		{
			document.getElementById(DivId).style.visibility="visible";
			// ou bien, selon ton css
			document.getElementById(DivId).style.display="block";
		}

Cordialement,
Lddsoft
Modifié par lddsoft (23 Feb 2013 - 16:36)
Administrateur
Merci d'éditer le titre du sujet pour le rendre plus explicite. Je n'imagine pas un forum où chacun poste "J'ai un petit problème, venez m'aider", "Help", "Aidez-moi", "Petite question", "Je vous offre une saucisse si vous me répondez", etc