Button avec deux fonctions

Version imprimable

Bonjour,

Je cherche un moyen d'avoir deux fonctions différentes lorsqu'on clique sur un bouton.

Avec une checkbox, le code suivant fonctionne bien.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
// Masquer le panneau
function hidepanel(input)
{
  if (input.checked) {
    document.getElementById("panel").style.display = "none";
  }
  else {
    document.getElementById("panel").style.display = "block";
  }
}
</script>
 
<label><input type="checkbox" onclick="hidepanel(this)">Masquer le panneau</label>

Quand on coche la case ça exécute la fonction1 et quand on décoche, ça exécute la fonction2.
Je cherche à faire la même chose mais avec un bouton, et avec une fonction différente, ci-dessous :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
// au premier clic, je souhaite avoir ça :
  var lien_css = document.createElement('link');
    lien_css.setAttribute("href","./files/css/layers-off.css");
    lien_css.setAttribute("rel","stylesheet");
    lien_css.setAttribute("type","text/css");
    document.getElementsByTagName("head").item(0).appendChild(lien_css);
 
// au second clic, je souhaite avoir ça :
  var lien_css = document.createElement('link');
    lien_css.setAttribute("href","./files/css/layers-on.css");
    lien_css.setAttribute("rel","stylesheet");
    lien_css.setAttribute("type","text/css");
    document.getElementsByTagName("head").item(0).appendChild(lien_css);

Merci pour votre aide.

Quelque chose comme ça ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function maFonction(unObjet) {
 if (unObjet.value == "Fonction 1") {
   alert('je fais ça');
         unObjet.value = "Fonction 2";
 } else {
   alert('je fais çi');
         unObjet.value = "Fonction 1"; 
 }
}
//-->
</script>
 
</head>
<body>
 
<input type="button" value="Fonction 1" onclick="maFonction(this)"/>
</body>
</html>

jour

on peut aussi initialisé une variable qui vaut soit true soit false

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
// Masquer le panneau
 
var etat=false
 
function hidepanel(input)
{
  if (etat) {
    document.getElementById("panel").style.display = "none";
    etat=false
  }
  else {
    document.getElementById("panel").style.display = "block";
    etat=true
  }
}
</script>
 
<label><input type="checkbox" onclick="hidepanel(this)">Masquer le panneau</label>

26/11/2016, 23h52
maryliseduteil

Merci pour vos réponses et votre aide :)
27/11/2016, 10h18
NoSmoking

Bonjour,

Citation:

Je cherche à faire la même chose mais avec un bouton, et avec une fonction différente, ci-dessous :

si je comprend bien au premier click tu linkes un fichier CSS et au deuxième tu en linkes un second.

J'ai du mal à comprendre l'utilité de cette démarche, pourquoi ne pas tout charger et ensuite jouer avec un add/remove de classe sur le(s) élément(s) concerné(s) ?

Citation:

Envoyé par NoSmoking

Bonjour,
si je comprend bien au premier click tu linkes un fichier CSS et au deuxième tu en linkes un second.

J'ai du mal à comprendre l'utilité de cette démarche, pourquoi ne pas tout charger et ensuite jouer avec un add/remove de classe sur le(s) élément(s) concerné(s) ?

Complètement d’accord, d’autant plus qu’à chaque clic, une nouvelle feuille de style va être ajoutée au head, ce qui crée des doublons.

Dans ton cas Marylise, il semblerait que tu aies simplement besoin d’un classique toggle (commutateur) de visibilité.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <script> "use strict"; // Masquer le panneau function togglePanel(button) { var panel = document.getElementById("panel"); if ("none" === panel.style.display) { panel.style.display = "block"; button.textContent = "Masquer le panneau"; } else { panel.style.display = "none"; button.textContent = "Afficher le panneau"; } } </script> <button onclick="togglePanel(this)"> Masquer le panneau </button>

Merci pour vos réponses.

En effet, le but de ma fonction est de charger un css différent. Vous avez confondu les fonctions que je souhaitais.
La fonction pour masquer le panel est différente.

La fonction que je souhaite implémenter est celle-ci donc (j'ai mal formulé ma question je crois) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 // au premier clic, je souhaite avoir ça : var lien_css = document.createElement('link'); lien_css.setAttribute("href","./files/css/layers-off.css"); lien_css.setAttribute("rel","stylesheet"); lien_css.setAttribute("type","text/css"); document.getElementsByTagName("head").item(0).appendChild(lien_css); // au second clic, je souhaite avoir ça : var lien_css = document.createElement('link'); lien_css.setAttribute("href","./files/css/layers-on.css"); lien_css.setAttribute("rel","stylesheet"); lien_css.setAttribute("type","text/css"); document.getElementsByTagName("head").item(0).appendChild(lien_css);
Les fichiers layers-on ou layers-off ne contiennent que ça :

Code:

path {display:block !important;}

Ou display:none pour l'autre.

Le problème c'est que je n'arrive pas à agir sur le sélecteur path à part avec du css. J'ai essayé avec document.getElementsByTagName mais ça ne fonctionne pas.

Pour le moment ma fonction ressemble à ceci et fonctionne bien (mais en effet, ça charge à chaque fois un css dans le head, qui reste cependant très léger) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var currentlayers = true; function layers() { if (currentlayers == true) { currentlayers = false; var lien_css = document.createElement('link'); lien_css.setAttribute("href","./files/css/layers-off.css"); lien_css.setAttribute("rel","stylesheet"); lien_css.setAttribute("type","text/css"); document.getElementsByTagName("head").item(0).appendChild(lien_css); } else { currentlayers = true; var lien_css = document.createElement('link'); lien_css.setAttribute("href","./files/css/layers-on.css"); lien_css.setAttribute("rel","stylesheet"); lien_css.setAttribute("type","text/css"); document.getElementsByTagName("head").item(0).appendChild(lien_css); } }
Et mon bouton html :

Code:

<button onclick="layers()" class="layers" title="Afficher/Masquer les calques"></button>

J'ai une fonction similaire pour changer la couleur de fond et d'écriture (blanc sur fond noir, ou noir sur fond blanc).
Cette fonction appelle aussi deux fichiers css différents.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 // Changer la couleur de fond var colorblack = true; function color() { if (colorblack == true) { colorblack = false; var lien_css = document.createElement('link'); lien_css.setAttribute("href","./files/css/white.css"); lien_css.setAttribute("rel","stylesheet"); lien_css.setAttribute("type","text/css"); document.getElementsByTagName("head").item(0).appendChild(lien_css); } else { colorblack = true; var lien_css = document.createElement('link'); lien_css.setAttribute("href","./files/css/black.css"); lien_css.setAttribute("rel","stylesheet"); lien_css.setAttribute("type","text/css"); document.getElementsByTagName("head").item(0).appendChild(lien_css); } }
Et le bouton html :

Code:

<button onclick="color()" class="color" title="Changer la couleur de fond"></button>

Dans ces deux fichiers css, il y a pas mal de données qui changent, et comme je ne sais pas le faire dans la fonction javascript avec les document.getElementsByXXX, je l'ai fait en css en attendant. :oops:

black.css :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 /* CSS pour fond de page noir */ body {color:#fff;background:#000;} a {color:lightblue;} a.button:link, a.button:visited, a.button:hover {border:1px solid #fff;} button.panelzoom, button.panelmap, button.layers, button.panelbonus, button.panelhelp, button.color {filter:invert(0);} #controlpanel {border:1px solid #fff;}
white.css :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 /* CSS pour fond de page blanc */ body {color:#000;background:#fff;} a {color:#170d2b;} #panelbonus a {color:lightblue;} a.button:link, a.button:visited, a.button:hover {border:0;} button.panelzoom, button.panelmap, button.layers, button.panelbonus, button.panelhelp, button.color {filter:invert(1);} #controlpanel {border:1px solid #000;}

Pour commencer, voici une petite optimisation de tes fonctions :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 var currentlayers = true; function layers() { var lien_css = document.createElement('link'); lien_css.rel = "stylesheet"; lien_css.type = "text/css"; if (currentlayers) { currentlayers = false; lien_css.href = "./files/css/layers-off.css"; } else { currentlayers = true; lien_css.href = "./files/css/layers-on.css"; } document.head.appendChild(lien_css); } // Changer la couleur de fond var colorblack = true; function color() { var lien_css = document.createElement('link'); lien_css.rel = "stylesheet"; lien_css.type = "text/css"; if (colorblack) { colorblack = false; lien_css.href = "./files/css/white.css"; } else { colorblack = true; lien_css.href = "./files/css/black.css"; } document.head.appendChild(lien_css); }
Mais ça ne règle pas le problème des doublons qui s’ajoutent à chaque clic. Tu ne le sais peut-être pas, mais la gestion dynamique de feuilles de style n’est pas une pratique adaptée aux besoins courants. Lors de l’insertion d’une nouvelle feuille, ça demande beaucoup de travail au navigateur de rechercher quels sélecteurs correspondent à quels éléments dans la page. Basiquement, tu peux prendre le nombre de sélecteurs dans la feuille, multiplier par le nombre d’éléments dans la page, et ça te donne le début d’une idée de la complexité de l’opération. Bien sûr j’exagère, ça fait l’objet de nombreuses optimisations (d’ailleurs, une lecture intéressante à ce sujet), mais ça reste quelque chose de non trivial, surtout si la feuille de style et la page sont grandes.

Suis les conseils de NoSmoking, tu verras que c’est beaucoup plus simple de jouer sur les classes. Par exemple, tu peux ajouter des classes sur le body, disons .white-bg pour un fond blanc et .black-bg pour un fond noir, et commuter entre les deux.
Code:

1 2 3 4 5 6 7 8 9 10 function color() { if (document.body.classList.contains("white-bg")) { document.body.classList.remove("white-bg"); document.body.classList.add("black-bg"); } else { document.body.classList.remove("black-bg"); document.body.classList.add("white-bg"); } }
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 /* CSS pour fond de page noir */ body.black-bg { color: white; background: black; } body.black-bg a { color: lightblue; } body.black-bg a.button:link, body.black-bg a.button:visited, body.black-bg a.button:hover { border: thin solid white; } body.black-bg button.panelzoom, body.black-bg button.panelmap, body.black-bg button.layers, body.black-bg button.panelbonus, body.black-bg button.panelhelp, body.black-bg button.color { filter: invert(0); } body.black-bg #controlpanel { border: thin solid white; } /* CSS pour fond de page blanc */ body.white-bg { color: black; background: white; } body.white-bg a { color: #170d2b; } body.white-bg #panelbonus a { color: lightblue; } body.white-bg a.button:link, a.button:visited, a.button:hover { border: none; } body.white-bg button.panelzoom, body.white-bg button.panelmap, body.white-bg button.layers, body.white-bg button.panelbonus, body.white-bg button.panelhelp, body.white-bg button.color { filter:invert(100%); } body.white-bg #controlpanel { border: thin solid black; }
Ça te paraîtra peut-être fastidieux de faire toutes ces répétitions dans le code CSS ; c’est là qu’interviennent les précompilateurs tels que SASS.

Oh, et quant à ton problème de path, j’avoue que je n’ai pas bien compris si tu utilisais ce mot juste dans ton post pour raccourcir un sélecteur qui en réalité est plus long, ou si tu as réellement des balises <path> dans ta page. Comme ces balises ne font pas partie de HTML, je suppose qu’il y a un namespace particulier à spécifier, et j’avoue que je ne sais pas bien comment ça se passe au niveau du CSS dans ce cas.

Si tu galères avec les fonctions getElementsByXXX, jette un œil à querySelectorAll, tu verras c’est très confortable !

Merci beaucoup. Ta fonction pour la couleur fonctionne très bien, et si elle est plus optimisée que mon ancienne méthode, alors c'est chouette.
En plus, j'apprends des choses au fur et à mesure. :)

Pour path, ce n'est pas un raccourci, j'ai bien un sélecteur path dans mon code, mais il ne correspond en effet à aucune balise html.

path est défini dans du javascript, il s'agit de coordonnées de différents points sur une image, correspondant donc à une zone polygonale.
En gros, j'ai un fichier javascript avec ceci comme données :
Code:

1 2 3 4 5 6 var zones = [ { name: "Nom de la zone", txt: "blablabla", bord: "blue", path:"m 2827,578 -36,42 -49,82 -35,42 35,36 56,45 12,10 -14,29 11,10 11,33 13,33 6,35 4,23 -3,9 -5,2 3,28 10,8 2,4 7,-6 15,17 -4,5 -6,-6 -9,7 5,7 -11,6 -16,10 -19,16 -1,8 -3,8 -3,14 z" },
Ce sont des coordonnées relatives et non absolues, chaque point se calculant à partir du précédent.

Au survol de la zone, ça affiche un calque en surbrillance (de couleur "blue" donc pour l'exemple ci-dessus). Et je souhaite une fonction qui désactive la surbrillance au survol (qui désactive tous les calques en gros, donc le fameux sélecteur path). D'où ma fonction qui switch entre display:block et none, mais dans des fichiers css pour le moment.

S'il y a moyen d'optimiser ça comme pour la fonction color (sans charger des fichiers css à chaque fois), ce serait chouette. :)

J'essaye de bidouiller de mon côté, sans succès pour le moment car je n'arrive pas à trouver la syntaxe (à partir de ta formule) pour sélectionner ce fameux path.

Encore merci à tous pour vos conseils et votre aide.

J'ai essayé cette fonction pour masquer/afficher path, mais ça ne fonctionne pas. Il y a un truc que j'ai pas encore dû bien comprendre ^^
Code:

1 2 3 4 5 6 7 8 9 10 11 // Afficher/Masquer les calques au survol function layers() { if (document.path.classList.contains("layers-on")) { document.path.classList.remove("layers-on"); document.path.classList.add("layers-off"); } else { document.path.classList.remove("layers-off"); document.path.classList.add("layers-on"); } }
Le CSS :
Code:

1 2 path.layers-on {display:block !important;} path.layers-off {display:none !important;}
Le bouton html :

Code:

<button onclick="layers()" class="layers" title="Afficher/Masquer les calques au survol des zones"></button>

Bien sûr, ça ne fonctionne pas. :mouarf:
Qu'ai-je mal fait du coup ?

Je tenais encore à préciser (si ça n'a pas déjà été dit), que je suis vraiment nulle en programmation. Je sais un peu me débrouiller en copiant collant des bouts de code, ou en adaptant suivant mes besoins à partir de formules déjà existantes, mais mes connaissances (et mes facultés de compréhension surtout) s'arrêtent là. :?
J'ai déjà essayé d'apprendre javascript et php, mais il arrive un moment où je ne comprends plus rien (c'est pas trop mon domaine en gros).

Néanmoins, avec un peu d'aide par-ci par-là, beaucoup de prises de tête et d'épluchages de code, voici ce que j'ai réussi à faire jusqu'à présent (vous remarquerez que toutes mes questions sur le forum ces derniers jours concernent cette application :) ) :
http://www.donjondudragon.fr/map/laelith.html

Il s'agit d'une carte interactive donc (d'une ville imaginaire, dans le cadre des jeux de rôle sur table). Bien sûr, le script peut servir pour toutes sortes de cartes, plans, images et autres (imaginaires ou non, évidemment :mrgreen:).

Les différentes fonctions :
- Zoom molette centré sur le curseur
- drag and drop
- déplacement de quatre façons différentes (flèches du clavier, celles du panel en haut à droite, au double clic, ou en drag and drop)
- quelques fonctions sympas : notre fameux "afficher/masquer les calques" dont on parle sur ce topic même, le changement de couleur de fond, et divers panneaux qui s'affichent pour diverses choses.
- sélection d'un lieu dans une liste déroulante pour afficher la position sur la carte et sa description.
- calques des quartiers au survol.
- le tout devrait normalement être responsive, même si sur petits écrans ce n'est pas très pratique d'utilisation.

Tout le code source est récupérable en faisant "Enregistrer sous", il n'y a que la carte je crois qui ne se télécharge pas.

Il me reste une fonction "vitale" qu'il me faut implémenter (l'objet d'un prochain topic certainement :D) : l'autocomplete search. Un truc de ce genre : http://jqueryui.com/autocomplete/#combobox
En gros, une zone de saisie qui élimine au fur et à mesure les choix possibles (très pratique lorsque la liste fait 12km de long).

Bon, tout ça n'a pas grand-chose à voir avec le topic, mais je voulais vous montrer un peu l'utilité de toutes mes questions afin que vous visualisez mieux mes objectifs. :)

Encore merci pour votre aide. Ça fait plaisir de se savoir accompagnée par des gens compétents. ;)

27/11/2016, 22h36
Watilin

Ton path n’est pas un élément HTML *. Les sélecteurs CSS et donc, par extension, la fonction querySelector qui les utilise, ne peuvent agir que sur des éléments HTML. Tu te doutes bien qu’il n’est pas possible de « désactiver » une instruction JavaScript au moyen de CSS ;)

Peut-être que tu peux avoir plus d’infos à l’endroit où tu as trouvé ce code qui dessine ton path. Il n’y a pas cent cinquante moyens de dessiner dans une page web : c’est soit un <canvas>, soit un <svg>. Tu peux utiliser l’inspecteur d’éléments de ton navigateur (dans les outils de la touche F12) pour essayer de trouver l’élément en question. Note au passage : use et abuse de ces outils, ils sont précieux et te permettent de comprendre plein de trucs !

Vu ce que tu essayes de faire et ce que tu as déjà réussi, je pense que tu as la curiosité et la motivation nécessaires pour ne pas rester nulle en programmation très longtemps ;)

* Edit pour la postérité : le <path> dont il est question est en réalité un élément SVG, généré au moyen de Raphael.js. En tant qu’élément SVG, il s’intègre au DOM de la page comme un élément HTML normal, et donc en théorie une règle CSS display: none devrait s’appliquer dessus.
27/11/2016, 22h45
maryliseduteil

Merci Watilin, et pour tes encouragements.

J'utilise beaucoup F12 étant webmaster. Je vais me renseigner pour le path. :)
Toutefois, étant donné que les fichiers css layers-on ou off ne chargent qu'une seule petite instruction (et pas un gros fichier qui modifie toute la page), ça n'est pas non plus très grave pour le navigateur, si j'ai bien compris ?

Je viens de voir sinon que le zoom molette centré sur le curseur déconne sur Firefox, et pas sur Chrome... :calim2:
Quelle prise de tête...
27/11/2016, 23h36
Watilin

En effet ce n’est pas très grave, mais disons que c’est une façon de faire inhabituelle. Et du point de vue de la maintenance du code, les choses inhabituelles sont rarement les meilleures :P
28/11/2016, 12h56
NoSmoking
Ouf, vous avez été prolifique...mais je reviens sur

Citation:

Toutefois, étant donné que les fichiers css layers-on ou off ne chargent qu'une seule petite instruction(...)

certes mais à chaque click un nouveau fichier se « linke » au document et c'est donc la dernière déclaration qui est prise en compte car annulant la précédente. Si tu cliques 20 fois sur l'icône ton DOM sera surchargé de 20 <link href="./files/css/layers-xxx.css" rel="stylesheet" type="text/css">, c'est en cela que la manière est très moyenne.

Tu pourrais éventuellement passer par des feuilles de style alternatives ce qui serait beaucoup plus propre, seulement voilà il y a plus simple en passant par ajouter/enlever une classe comme déjà mentionné.

Principe :
création dune déclaration CSS comme suit
Code:

1 2 3 svg.hide path { display: none; }
si ton élément <svg> à la classe « hide » ses enfants <path> seront masqués et l'action au survol ne sera pas visible.

Mise en oeuvre :
création d'une fonction déclenchée par un click sur un <button> par exemple
Code:

1 2 3 4 function showHideLlayers(){ var oSVG = document.querySelector('svg'); oSVG.classList.toggle("hide"); }
28/11/2016, 13h29
maryliseduteil

Merci NoSmoking, ça marche au poil :)
Et c'est plus propre (et la fonction est beaucoup plus courte).
Que du + :D
Merci.

EDIT : apparemment, ça ne fonctionne pas sur Internet Explorer 11. Ce n'est pas très grave vu que rien ne fonctionne correctement sur ce navigateur, mais c'est dommage quand même. :?
28/11/2016, 15h03
Watilin

Ok alors je n’avais pas capté que <path> était un élément SVG. Du coup je t’ai dit des bêtises en affirmant qu’on ne pouvait pas appliquer de styles dessus. J’ai édité mon message pour la postérité.

N’oublie pas le bouton résolu ;)
28/11/2016, 15h14
maryliseduteil

Pas de souci Watilin. ;)
J'ai vu ça cette nuit en lisant des tutos sur les svg mais je n'ai pas pour autant percutée sur le fait de pouvoir les sélectionner.

Je peux mettre le sujet sur Résolu, mais avant ça, n'existe-t-il pas un moyen de faire fonctionner cette fonction sur IE ?

En fait, sur IE, les calques apparaissent au survol, mais ne disparaissent pas lorsqu'on met le curseur en dehors. Du coup, sans cette fonction d'afficher/masquer les calques ça rend l'utilisation peu confortable.

Citation:

EDIT : apparemment, ça ne fonctionne pas sur Internet Explorer 11.

effectivement j'en avais oublié que pour IE on a le sentiment de ce retrouver 10-15 ans en arrière sur certains points.

Remplace la fonction layer() par ce code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function layers() { var oSVG = document.querySelector('SVG') || document.querySelector('[xmlns="http://www.w3.org/2000/svg"]'); if (oSVG) { if ('classList' in oSVG) { oSVG.classList.toggle('hide'); } // pour IE else { if ('hide' === oSVG.getAttribute('class')) { oSVG.removeAttribute('class'); } else { oSVG.setAttribute('class', 'hide'); } } } }
pour le coup plus verbeux comme au bon vieux temps :mrgreen:

Citation:

En fait, sur IE, les calques apparaissent au survol, mais ne disparaissent pas lorsqu'on met le curseur en dehors.

pour ce point je pense qu'il faut que tu regardes plus avant dans la librairie Raphael, ce « bug » a dû être pris en compte

28/11/2016, 15h32
maryliseduteil

Merci beaucoup, c'est nickel :)
Je met sur résolu.

Merci à tous pour vos interventions et votre aide. :)