Discussion :

[bouboule22]

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

[mathieu]

à quoi servent les différents boutons ?

[-Nikopol-]

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>

[bouboule22]

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

[bouboule22]

c'est bon j'ai juste rajouté: button1.addEventListener('click', changeImage1, marker1.remove() );

[NoSmoking]

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

• EventTarget.addEventListener()