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 le code sur 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();
});
});
};
Je pense qu'il vaudrait mieux déclarer les fonctions en dehors du "document.addEventListener("DOMContentLoaded", () => {"