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 :

Réitérer une fonction en javascript


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    mars 2010
    Messages
    38
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2010
    Messages : 38
    Points : 28
    Points
    28
    Par défaut Réitérer une fonction en javascript
    Bonjour,
    Bonne année avant tout ! voila je suis bloquée je dois réitérer une fonction qui contient des ouvertures et fermetures de pop up et au 3e clic sur un bouton, un marqueur mapbox est supprimé, c'est a ce moment là que la fonction s'arrete et je veux que celle ci recommence en continue..j'ai un peu tout essayé dont do while, mais cela ne fonctionne pas, je suis un peu désespérée.. quelqu'un peut il m'aider s'il vous plait? merci d'avance
    voici le javascript désolée je ne peux pas tout mettre...

    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
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    mapboxgl.accessToken = '';
    var map = new mapboxgl.Map({
      container: 'map', // Container ID
      style: '',
      //style: '', // Map style to use
      center: [6.2, 45], // Starting position [lng, lat]
      zoom: 13, // Starting zoom level
    });
    var button1 = document.getElementById('border1');
    var button2 = document.getElementById('border2');
    var button3 = document.getElementById('border3');
    var button4 = document.getElementById('border4');
    var div1 = document.getElementById('border1none');
    var marker1 = document.getElementById('marker1');
    var block1 = document.getElementById('block1');
     
     
    function changeImage1() {
     
      var marker1 = new mapboxgl.Marker({
          color: '#ff8e0a',
          className: 'marker1'
        }) // Initialize a new marker 
        .setLngLat([6.21, 44.9]) // Marker [lng, lat] coordinates
        .addTo(map);
     
      block1.style.display = 'none';
      div1.style.display = 'none';
     
      button1.onclick = function () {
        if (button1.style.display !== 'none') {
          div1.style.display = 'block';
          block1.style.display = 'block';
          button1.style.display = 'none';
          $('#border2,#border3,#border4').prop("disabled", true);
        } else {
          div1.style.display = 'none';
          block1.style.display = 'none';
          button1.style.display = 'block';
        }
      }
      div1.onclick = function () {
        if (div1.style.display !== 'none') {
          div1.style.display = 'none';
          block1.style.display = 'none';
          button1.style.display = 'block';
          $('#border2,#border3,#border4').prop("disabled", false);
        } else {
          div1.style.display = 'block';
          block1.style.display = 'block';
          button1.style.display = 'none';
        }
        button1.onclick = function() {
          marker1.remove(); 
           $('#border1').prop("disabled", false); 
        }   
    }
      validation1.onclick = function () {
        if (x.style.display = "block") {
          div1.style.display = 'none';
          block1.style.display = 'none';
          div1.style.display = 'none';
          button1.style.display = 'none';
          button2.style.display = 'none';
          button3.style.display = 'none';
          button4.style.display = 'none';
        } else {
          x.style.display = "none";
        }
      }
      annuler1.onclick = function () {
        x.style.display = "none";
        block1.style.display = 'none';
        div1.style.display = 'none';
        button1.style.display = 'block';
        button2.style.display = 'block';
        button3.style.display = 'block';
        button4.style.display = 'block';
        $('#border2,#border3,#border1,#border4').prop("disabled", false);
      }
     
      }

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 477
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 477
    Points : 13 139
    Points
    13 139
    Par défaut
    à quoi servent les différents boutons ?

  3. #3
    Responsable LaTeX

    Avatar de -Nikopol-
    Homme Profil pro
    Développeur Web
    Inscrit en
    mai 2013
    Messages
    2 127
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Enseignement

    Informations forums :
    Inscription : mai 2013
    Messages : 2 127
    Points : 11 188
    Points
    11 188
    Billets dans le blog
    5
    Par défaut
    si j'ai bien compris ceci devrait faire l'affaire
    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
    <button data-action="one" id="myBtn">click !</button>
    <script>
        const btn = document.querySelector('#myBtn');
        btn.addEventListener('click',()=>{
            if(btn.dataset.action === 'one'){
                btn.insertAdjacentHTML('afterend','<p>action 1<p>')
                btn.dataset.action = 'two';
            }else if (btn.dataset.action === 'two') {
                btn.insertAdjacentHTML('afterend','<p>action 2<p>')
                btn.dataset.action = 'three';
            }else if (btn.dataset.action === 'three') {
                btn.insertAdjacentHTML('afterend','<p>action 3<p>')
                btn.dataset.action = 'one';
            }
        })
    </script>

  4. #4
    Nouveau membre du Club
    Profil pro
    Inscrit en
    mars 2010
    Messages
    38
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2010
    Messages : 38
    Points : 28
    Points
    28
    Par défaut
    Merci pour votre aide, pour répondre à Mathieu les boutons ouvrent des pop up contenant des infos des images d'autres boutons avec une autre pop up.. j'ai tenté le code de Nikopol je ne connaissais pas dataset.action, j'ai supprimé le btn.insertAdjacentHTML('afterend','<p>action 2<p>') car je pense pas en avoir besoin, ça marche jusqu'au 2e click, le 3eme click ne fait pas supprimer le marqueur et l'action ne revient pas, j'ai dû mal m'y prendre, ça donne ça..

    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
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
     
    function changeImage1() {
     
      var marker1 = new mapboxgl.Marker({
          color: '#ff8e0a',
          className: 'marker1'
        }) // Initialize a new marker 
        .setLngLat([6.167944849709259, 49.361966103675975]) // Marker [lng, lat] coordinates
        .addTo(map);
     
      block1.style.display = 'none';
      div1.style.display = 'none';
     
     
    const btn1 = document.querySelector('#border1');
    btn1.addEventListener('click',()=>{
        if(btn1.dataset.action === 'one'){
          if (button1.style.display !== 'none') {
            div1.style.display = 'block';
            block1.style.display = 'block';
            button1.style.display = 'none';
            $('#border2,#border3,#border4').prop("disabled", true);
          } else {
            div1.style.display = 'none';
            block1.style.display = 'none';
            button1.style.display = 'block';
          }
        div1.onclick = function () {
          if (div1.style.display !== 'none') {
            div1.style.display = 'none';
            block1.style.display = 'none';
            button1.style.display = 'block';
            $('#border2,#border3,#border4').prop("disabled", false);
          } else {
            div1.style.display = 'block';
            block1.style.display = 'block';
            button1.style.display = 'none';
           btn1.dataset.action = 'two';
          } 
     
        }
        }else if (btn1.dataset.action === 'two') {
          if (div1.style.display !== 'none') {
            div1.style.display = 'none';
            block1.style.display = 'none';
            button1.style.display = 'block';
            $('#border2,#border3,#border4').prop("disabled", false);
          } else {
            div1.style.display = 'block';
            block1.style.display = 'block';
            button1.style.display = 'none';
          } 
          btn1.dataset.action = 'three';
        } else {
          marker1.remove(); 
        $('#border1').prop("disabled", false); 
        btn1.dataset.action = 'one';
        }  
      }) 
    }

  5. #5
    Nouveau membre du Club
    Profil pro
    Inscrit en
    mars 2010
    Messages
    38
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2010
    Messages : 38
    Points : 28
    Points
    28
    Par défaut
    c'est bon j'ai juste rajouté: button1.addEventListener('click', changeImage1, marker1.remove() );

  6. #6
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 602
    Points : 39 630
    Points
    39 630
    Par défaut
    Bonjour,
    je doute de l’efficacité de mettre ton marker1.remove() en paramètre option de la méthode addEventListener !

    EventTarget.addEventListener()

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

Discussions similaires

  1. Passage de variables dynamiques à une fonction en javascript
    Par ianpelletier dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 03/07/2015, 04h02
  2. Passage de paramêtres dans une fonction en javascript
    Par FRof dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 02/05/2015, 00h25
  3. Faire une fonction en JavaScript
    Par bella125 dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 10/06/2014, 16h07
  4. Comprendre une fonction en javascript
    Par jujufromage dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 05/02/2014, 06h50
  5. [AJAX] [DWR] sérialiser une fonction vers javascript
    Par archeboc dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 10/03/2008, 03h58

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