Réitérer une fonction en javascript

Version imprimable

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:

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);
  }
 
  }

02/01/2021, 16h34
mathieu

à quoi servent les différents boutons ?

si j'ai bien compris ceci devrait faire l'affaire

Code:

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>

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:

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';
    }  
  }) 
}

05/01/2021, 14h53
bouboule22

c'est bon j'ai juste rajouté: button1.addEventListener('click', changeImage1, marker1.remove() );
05/01/2021, 18h21
NoSmoking

Bonjour,
je doute de l’efficacité de mettre ton marker1.remove() en paramètre option de la méthode addEventListener !

• EventTarget.addEventListener()