11526 sujets

JavaScript, DOM et API Web HTML5

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)
Modérateur
Salut juanito76,

Oui il y a un poil dans la soupe entre l'utilisation du onclick et le DOMContentLoaded.

De toute facon le onclick n'est pas une très bonne facon de faire (cqfd avec ton post) utilise plutot un addEventListener sur ton button :

Au lieu de :
<button
  type="button"
  class="btn btn-danger"
  id="deleteProfile"
  onclick="showDeleteProfileSection()"
>
  test
</button>

document.addEventListener("DOMContentLoaded", () => {
  function showDeleteProfileSection() {
    document.getElementById("deleteProfileSection").style.display = "block";
  }
}


Fait plutôt :

<button
  type="button"
  class="btn btn-danger"
  id="deleteProfile"
>
  test
</button>

document.addEventListener("DOMContentLoaded", (event) => {
  document.getElementById ("deleteProfile").addEventListener ("click", showDeleteProfileSection);
  function showDeleteProfileSection() {
    // blabla
  }
});


Bonne soirée
Meilleure solution
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();
      });