Vérifier si on appui sur le même bouton

Version imprimable

Bonjour à tous,

J'ai un petit soucis avec des boutons.
J'ai mis toutes les planètes du systèmes solaires dans la même fonctions pour un appel d'api.
Quand je clique par exemple sur Saturne, ça affiche ses informations, et si je clique de nouveau sur le même bouton, ça efface les infos/ferme le bouton. Jusqu'à la toit va bien.
Par contre le soucis, c'est quand je clique sur une autre planète, ça efface aussi le texte de Saturne, alors que je voudrais que les informations de mercure par exemple remplace celles de Saturne.

J'ai beau chercher, je ne vois pas comment faire.

Si quelqu'un à la solution je suis preneur, merci.

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
var texteAfficher = false
var texteAfficher2 = false
var texteAfficher3 = false
 
async function planetInfo(planetName) {
  const response = await fetch(`https://api.le-systeme-solaire.net/rest/bodies/${planetName}`);
  const infos = await response.json();
  if (texteAfficher == false) {
      console.log(infos);
    // document.querySelector("#informations")
    var container = document.getElementById("informations");
    container.innerHTML = "";
    container.innerHTML += `<p>${infos.name}</p>`;
    container.innerHTML += `<p>Année: ${infos.sideralOrbit} jours</p>`;
    container.innerHTML += `<p>Jour: ${infos.sideralRotation} heures</p>`;
    container.innerHTML += `<p>Rayon: ${infos.equaRadius} km</p>`;
    texteAfficher = true
  } else if(texteAfficher &&) {
    texteAfficher = false;
    var container = document.getElementById("informations");
    container.innerHTML = "";
  }
  // console.log(texteAfficher)
}
 
async function moonInfo(moonName) {
  if (texteAfficher3 == false) {
    const response = await fetch(`https://api.le-systeme-solaire.net/rest/bodies/${moonName}`);
    const infos = await response.json();
    var container = document.getElementById("informations");
    container.innerHTML = "";
    // console.log(infos);
    container.innerHTML += `<p>${infos.name}</p>`;
    container.innerHTML += `<p>Rayon: ${infos.equaRadius} km</p>`;
    texteAfficher3 = true
  } else if (texteAfficher3) {
    texteAfficher3 = false;
    var container = document.getElementById("informations");
    container.innerHTML = "";
  }
}
 
async function starInfo(starName) {
  if (texteAfficher2 == false) {
    const response = await fetch(`https://api.le-systeme-solaire.net/rest/bodies/${starName}`);
    const infos = await response.json();
    var container = document.getElementById("informations");
    container.innerHTML = "";
    // console.log(infos);
    container.innerHTML += `<p>${infos.name}</p>`;
    container.innerHTML += `<p>Rayon: ${infos.equaRadius} km</p>`;
    texteAfficher2 = true;
  } else if(texteAfficher2) {
    texteAfficher2 = false;
    var container = document.getElementById("informations");
    container.innerHTML = "";
  }
}

20/07/2023, 10h12
Doksuri

salut, utilise la balise [code] pour y mettre ton code... on ne voit rien sur ta photo
20/07/2023, 10h24
alexandre1219

autant pour moi, c'est fait.
20/07/2023, 10h48
Archimède

Salut,
Si tout s'efface sans aucun affichage, c'est que tu remplis la condition du else if.... et donc que texteafficher est à true !
Donc lors du changement de bouton, il faut que tu reprennes ton code de manière à ce que texteafficher soit à false...
20/07/2023, 10h58
SpaceFrog

au temps pour moi ;)

On ne voit pas le HTML lié ...

En particulier

Code:

var container = document.getElementById("informations");

on ne sait pas ce que tu vides

Salut alexandre1219,

Une méthode comme ça ?
Tu remplaces par le nom de la planète comme valeur de l’attribut data-infos pour interroger l’api.

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
<!DOCTYPE html>
<html lang="fr">
 
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .buttonsystemsolaire {
      display: block;
      width: 150px;
      height: 26px;
      margin-bottom: 10px;
      font-size: 1em;
    }
 
    #citation {
      display: inline-block;
      width: 100%;
      font-size: 1.5em;
      color: #0000ff;
      text-align: center;
    }
  </style>
 
</head>
 
<body>
  <button class="buttonsystemsolaire"
    data-infos="Mercure est la planète la plus proche du Soleil (58 000 000 km de distance)">Mercure</button>
  <button class="buttonsystemsolaire"
    data-infos="Vénus est la deuxième planète la plus proche du Soleil dans notre système solaire. C'est également la plus chaude (il y fait plus de 470°)">Vénus</button>
  <button class="buttonsystemsolaire"
    data-infos="La Terre est la troisième planète la plus rapprochée du Soleil dont elle est distante de 150 millions de km.">Terre</button>
  <button class="buttonsystemsolaire"
    data-infos="Mars est la quatrième planète de notre système solaire en partant du Soleil. Elle se situe juste après Mercure par rapport à sa taille.">Mars</button>
  <button class="buttonsystemsolaire"
    data-infos="Jupiter est la cinquième planète de notre système solaire et aussi la plus grande. Son nom vient du plus grand des dieux de la mythologie romaine.">Jupiter</button>
  <button class="buttonsystemsolaire"
    data-infos="Saturne est, après Jupiter, la deuxième plus grande planète du système solaire.">Saturne</button>
  <button class="buttonsystemsolaire"
    data-infos="Uranus est la septième planète du système solaire et la troisième plus grande après Saturne.">Uranus</button>
  <button class="buttonsystemsolaire"
    data-infos="Neptune est la huitième et dernière planète du système solaire, la plus éloignée du soleil et la cinquième en grandeur après la Terre.">Neptune</button>
 
  <cite id="citation"></cite>
 
  <script>
    var buttonsystemsolaire = document.getElementsByClassName('buttonsystemsolaire')
 
    for (const buttonSelect of buttonsystemsolaire) {
      buttonSelect.addEventListener("click", () => {
        document.getElementById('citation').innerText = buttonSelect.getAttribute('data-infos')
      })
    }
 
  </script>
</body>
 
</html>

21/07/2023, 16h11
Dave Hiock

\ô/
surprenant cette ligne

Code:

} else if(texteAfficher &&) { // tu dois avoir une erreur

erreur de copie ?

Bizarre également tes duplications de fonctions, peut-être nous dire ce que tu souhaites réaliser et la structure utilisée, autant de boutons que de planètes ?