[Résolu] Supprimer les informations du profil

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 Voici mes code côté html

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

Et Javascript

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

Merci à vous tous
Modifié par _laurent (29 Nov 2024 - 22:52)

Bonjour Laurent

Merci beaucoup pour ton aide. En fait j'ai pu le faire d'une autre manière et ça a marché. Sur le HTML j'ai codifié comme ceci <button

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

Et sur Javascript ceci

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