IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Button avec deux fonctions


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Femme Profil pro
    Webmaster
    Inscrit en
    Novembre 2016
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2016
    Messages : 25
    Par défaut Button avec deux fonctions
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  2. #2
    Membre Expert
    Avatar de badaze
    Homme Profil pro
    Chef de projets info
    Inscrit en
    Septembre 2002
    Messages
    1 412
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Chef de projets info
    Secteur : Transports

    Informations forums :
    Inscription : Septembre 2002
    Messages : 1 412
    Par défaut
    Quelque chose comme ça ?

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    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>

  3. #3
    Membre très actif
    Homme Profil pro
    bricoleur par les mots
    Inscrit en
    Avril 2015
    Messages
    744
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 80
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : bricoleur par les mots
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 744
    Par défaut
    jour

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

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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>

  4. #4
    Membre averti
    Femme Profil pro
    Webmaster
    Inscrit en
    Novembre 2016
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2016
    Messages : 25
    Par défaut
    Merci pour vos réponses et votre aide

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    Bonjour,
    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) ?

  6. #6
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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>
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [XL-2013] Résultat aberrant avec deux fonctions SI imbriquées
    Par bolide7 dans le forum Excel
    Réponses: 23
    Dernier message: 30/12/2014, 09h59
  2. setInterval avec deux fonctions
    Par djouk dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 06/01/2011, 18h26
  3. Probléme requête avec deux fonction SUM
    Par kamnouz dans le forum Requêtes
    Réponses: 2
    Dernier message: 08/04/2010, 16h29
  4. bouton avec deux fonctions
    Par Daniela dans le forum IHM
    Réponses: 5
    Dernier message: 18/06/2009, 10h23
  5. Image avec deux fonctions OnIDblClick
    Par Romainll93 dans le forum Delphi
    Réponses: 3
    Dernier message: 25/02/2007, 14h17

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo