Bonjour à tous
Je dois créer un projet de réseau social équivalent à facebook et je suis en train de créer le profil d'un membre utilisant boostrap 5. A titre d'exemple je voulais supprimer les informations du profil de l'administrateur sauf que j''ai un message d'erreur m'indiquant Uncaught ReferenceError: showDeleteProfileSection is not defined
at HTMLButtonElement.onclick. Pouvez vous m'aider SVP? Merci à vous tous

<!--identité du profil administrateur-->
<div class="container mt-5">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body text-center">
<img
src="assets/Juan.png"
alt="Photo de profil de Juan"
class="rounded-circle img-fluid"
style="width: 150px"
/>
<h4 class="mt-3">Pseudonyme:</h4>
<p id="adminUsername">Juanito76</p>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card">
<div class="card-body">
<form id="adminProfileForm">
<div class="mb-3">
<label for="adminFullName" class="form-label"

Nom et prénom</label

<input
type="text"
class="form-control"
id="adminFullName"
name="FullName"
value="Gimenez Juan"
/>
</div>
<div class="mb-3">
<label for="adminAge" class="form-label">Âge</label>
<input
type="number"
class="form-control"
id="adminAge"
name="Age"
value="47"
/>
</div>
<div class="mb-3">
<label for="adminGender" class="form-label">Genre</label>
<select class="form-select" id="adminGender" name="Gender">
<option value="male" selected>Masculin</option>
<option value="female">Féminin</option>
</select>
</div>
<div class="mb-3">
<label for="adminEmail" class="form-label">Email</label>
<input
type="email"
class="form-control"
id="adminEmail"
name="Email"
value="juangimenez@gmail.com"
/>
</div>
<div class="mb-3">
<label for="adminPhone" class="form-label">Téléphone</label>
<input
type="tel"
class="form-control"
id="adminPhone"
name="Phone"
value="0676646362"
/>
</div>
<div class="mb-3">
<label for="adminBio" class="form-label">Présentation</label>
<textarea
class="form-control"
id="adminBio"
name="Bio"
rows="3"

Passionné par les jeux Olympiques</textarea

</div>
<div class="mb-3">
<label for="adminPreferences" class="form-label"
Préférences</label

<input
type="text"
class="form-control"
id="adminPreferences"
name="Preferences"
value="adore le tennis"
/>
</div>
<!--modification du profil de l'administrateur-->
<button type="submit" class="btn btn-primary">
Modifier les informations
</button>
<!--suppression du profil de l'administrateur-->
<button
type="button"
class="btn btn-danger"
id="deleteProfile"
onclick="showDeleteProfileSection()"

Supprimer
</button>
</form>
</div>
</div>
</div>
</div>
</div>

<!--Section pour supprimer le profil de l'administrateur-->
<div id="deleteProfileSection" class="container mt-5" style="display: none">
  <div class="card">
    <div class="card-body">
      <h5>Supprimer le profil de l'Administrateur</h5>
      <p>
        Êtes-vous sûr de vouloir supprimer votre profil administrateur?
        Cette action est irréversible.
      </p>
      <button
        type="button"
        class="btn btn-danger"
        id="confirmDeleteProfile"
      >
        Supprimer
      </button>
      <button
        type="button"
        class="btn btn-secondary"
        onclick="hideDeleteProfileSection()"
      >
        Annuler
      </button>
    </div>
  </div>

 document.addEventListener("DOMContentLoaded", () => {
  // Fonction pour afficher la section de confirmation de suppression
  function showDeleteProfileSection() {
    document.getElementById("deleteProfileSection").style.display = "block";
  }

  // Fonction pour cacher la section de confirmation de suppression
  function hideDeleteProfileSection() {
    document.getElementById("deleteProfileSection").style.display = "none";
  }

  // Gestionnaire d'événements pour le bouton de confirmation de suppression
  document
    .getElementById("confirmDeleteProfile")
    .addEventListener("click", async function () {
      try {
        const response = await fetch("http://localhost:3000/api/profil", {
          method: "DELETE",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${localStorage.getItem("token")}`,
          },
        });
        const data = await response.json();
        if (response.ok) {
          alert("Profil supprimé avec succès!");
          localStorage.removeItem("token");
          window.location.href = "/register.html";
        } else {
          alert(
            "Erreur lors de la suppression du profil : " + data.message
          );
        }
      } catch (error) {
        console.error("Erreur lors de la suppression du profil : ", error);
        alert("Erreur lors de la suppression du profil : " + error.message);
      }
    });

  // Gestionnaire d'événements pour le bouton d'annulation de suppression
  document
    .querySelector("#deleteProfileSection .btn-secondary")
    .addEventListener("click", function () {
      hideDeleteProfileSection();
    });

  // Charger le profil lors du chargement de la page
  loadAdminProfile();

  // Vérifier le type d'utilisateur (facultatif, selon vos besoins)
  checkUserType();
});

Ton problème illustre parfaitement la raison pour laquelle il ne faut pas utiliser les attributs HTML "onclick" … etc.

Ces derniers nécessitent que les fonctions JS associées soient déclarées dans l'espace global (ce qui est une très mauvaise pratique), et cela n'est pas le cas dans ton code puisque les fonctions sont encapsulées dans le gestionnaire du "addEventListener" (donc pas dispo dans l'espace global) :

// Espace global

document.addEventListener("DOMContentLoaded", () => {
  
  // Espace local à la fonction fléchée () => {}
  
  function showDeleteProfileSection() {
    …
  }
 
  function hideDeleteProfileSection() {
    …
  }

  …
})

Si tu développes un outil complexe côté front-end, je te suggèrerai d'utiliser une bibliothèque comme React qui t'évitera bien des soucis à ce niveau (gestion d'événements et de fonctions)

Et sinon à minima, les bonnes pratiques côté front-end sans bibliothèques/frameworks est de gérer les événements via "addEventListener" comme tu le fais déjà pour ton bouton d'annulation.

-
Edité par ninjavascript 4 décembre 2024 à 12:15:59

[résolu]

Bonjour ninjavascript

Je te remercie pour tes conseils. Au final je l'ai fait d'une autre manière et ça a marché. J'ai supprimé le onclick sur le HTML et je l'ai remplacé par ceci : 

type="button"
                  class="btn btn-danger"
                  id="deleteProfile"
                  data-bs-toggle="modal"
                  data-bs-target="#deleteProfileModal"
                >
                  Supprimer
                </button>

Et en javascript

// Gestionnaire d'événements pour le bouton d'annulation de suppression
    document
      .querySelector("#deleteProfileSection .btn-secondary")
      .addEventListener("click", function () {
        hideDeleteProfileSection();
      });

JuanGimenez3 a écrit:

[résolu]

Bonjour,

Sujet résolu

Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e