11540 sujets

JavaScript, DOM et API Web HTML5

Bouton avec Javascript qui ne fonctionne que sur certains navigateurs

Bonjour à tous ! Smiley smile

J'ai actuellement une page avec un contenu caché qui s'affiche lorsqu'on clique sur un bouton.

Le code ressemble à ça :
<html>
<head>
<script type="text/javascript">
<!--
function switchInfoPerso()
{
divInfo = document.getElementById('divacacher');

if (divInfo.style.display == 'none')
divInfo.style.display = 'block';
else
divInfo.style.display = 'none';

}
-->
</script> 
</head>

<body>

<a href="javascript: switchInfoPerso();">
<input type="button" class="submit" value="Afficher le texte" />
</a>

<div id="divacacher" style="display: none;">
Texte à masquer/afficher
</div>

</body>
</html>


Et ça fonctionne, mais uniquement sous certains navigateurs très récents, comme Firefox 4 ou Chrome 11.

Avec un simple texte à la place du "input", dans le <a>, ça fonctionne bien. C'est donc le fait de mettre un bouton à la place d'un simple lien qui fait bugger tout ça sur certains navigateur ... Smiley ohwell

Je ne sais pas pourquoi, je suis donc preneur d'une solution pour résoudre tout ça Smiley biggrin

Merci d'avance ! Smiley smile
Bertrand31 a écrit :
Avec un simple texte à la place du <input>, dans le <a>, ça fonctionne bien. C'est donc le fait de mettre un bouton à la place d'un simple lien qui fait bugger tout ça sur certains navigateur ... Smiley ohwell

Eh bien, tu utilises un INPUT de type submit, qui sert normalement à soumettre un formulaire. Mais tu n'as pas de formulaire. Je comprends que ça puisse perturber certains navigateurs.

Un bouton pour activer une fonction JavaScript, ça s'écrit ainsi en HTML:
<button type="button" onclick="switchInfoPerso();">
  Afficher le texte
</button>

L'élément A n'est pas fait pour faire des boutons, mais pour faire des liens hypertexte. Smiley cligne
@fvsch

Juste un point d'interrogation. En effet, tu dis :
a écrit :
Eh bien, tu utilises un INPUT de type submit, qui sert normalement à soumettre un formulaire


alors que Bertrand31 a utilisé le type "button" pour son input et qu'il a utilisé le mot "submit" pour l'attribut "class" de son input.

Tant mieux si son code marche à présent; cela bloquait peut-être certains navigateurs pour la raison que tu donnes: (
a écrit :
Mais tu n'as pas de formulaire. Je comprends que ça puisse perturber certains navigateurs.
)
lddsoft a écrit :
alors que Bertrand31 a utilisé le type button pour son input

Oui, j'avais lu le code trop vite, c'est la classe qui m'a perturbé.
Remarque: écrire type="button" class="submit" est une bêtise. De même qu'écrire class="active" pour un lien. Mieux vaut éviter de réutiliser en nom de classe des mots-clé déjà utilisés pour des fonctionnalités importantes de HTML (type "submit" des INPUT et BUTTON) ou de CSS (pseudo-classe :active). En général ça ne gêne pas les navigateurs, mais du côté des humains (soi-même, des collaborateurs ou des personnes amenées à reprendre le code plus tard) ça crée de la confusion. Smiley cligne

lddsoft a écrit :
cela bloquait peut-être certains navigateurs pour la raison que tu donnes

En fait je pense plutôt que l'évènement click sur un élément INPUT ne remonte pas l'arbre DOM comme sur n'importe quel autre élément. L'exemple que j'ai donné marcherait aussi avec un élément INPUT:
<input type="button" value="Afficher le texte" onclick="switchInfoPerso();">

Dans les deux cas, ne pas mettre de lien autour...
Sujet clos
Aller à