Discussion :

[alexandre1219]

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

[Doksuri]

salut, utilise la balise [code] pour y mettre ton code... on ne voit rien sur ta photo

[alexandre1219]

autant pour moi, c'est fait.

[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...

[SpaceFrog]

au temps pour moi


On ne voit pas le HTML lié ...

En particulier

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

on ne sait pas ce que tu vides

[ASCIIDEFOND]

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 HTML :

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
<!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>

[Dave Hiock]

\ô/
surprenant cette ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  } 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 ?