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 : 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
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 = "";
  }
}