Correction des étoiles des commentaires

CodeIgniter-3.1.13/application/views/accueil.php

@@ -59,8 +59,9 @@
                 <form action="<?php echo site_url('utilisateur/ajouter_avis'); ?>" method="post">
                     <textarea name="commentaire" rows="3" placeholder="Écrivez votre commentaire ici..." required></textarea>
                     <!-- Ajout des étoiles pour la notation -->
+                    <h3>Note :</h3>
                     <div class="rating">
-                        <input type="radio" id="star1" name="rating" value="1"><label for="star1">&#9733;</label>
+                        <input type="radio" id="star1" name="rating" value="1" checked><label for="star1">&#9733;</label>
                         <input type="radio" id="star2" name="rating" value="2"><label for="star2">&#9733;</label>
                         <input type="radio" id="star3" name="rating" value="3"><label for="star3">&#9733;</label>
                         <input type="radio" id="star4" name="rating" value="4"><label for="star4">&#9733;</label>
@@ -96,33 +97,5 @@
         </div>
     </div>
 </body>
-<script>
+    <script src="<?php echo base_url('assets/js/script_accueil'); ?>"></script>
-    // Sélectionnez tous les boutons radio d'étoiles
-    const stars = document.querySelectorAll('.rating input[type="radio"]');
-    // Sélectionnez le champ caché pour la notation
-    const notationInput = document.getElementById('notation');
-
-    // Parcourez tous les boutons radio d'étoiles
-    stars.forEach(star => {
-        // Ajoutez un écouteur d'événement pour le clic sur chaque étoile
-        star.addEventListener('click', function() {
-            // Obtenez le numéro de l'étoile sélectionnée
-            const selectedStar = parseInt(this.value);
-
-            // Mettez à jour la valeur du champ caché "notation" avec la valeur de l'étoile sélectionnée
-            notationInput.value = selectedStar;
-
-            // Parcourez toutes les étoiles
-            stars.forEach(star => {
-                // Si l'étoile est inférieure ou égale à l'étoile sélectionnée, colorez-la en jaune, sinon, laissez-la grise
-                if (parseInt(star.value) <= selectedStar) {
-                    star.nextElementSibling.style.color = '#FFD700'; // Colorez l'étoile en jaune
-                } else {
-                    star.nextElementSibling.style.color = '#ccc'; // Laissez l'étoile grise
-                }
-            });
-        });
-    });
-</script>
-
 </html>

CodeIgniter-3.1.13/assets/js/script_accueil.js

@@ -0,0 +1,49 @@
+document.addEventListener("DOMContentLoaded", function() {
+    // Sélectionnez tous les boutons radio d'étoiles
+    const stars = document.querySelectorAll('.rating input[type="radio"]');
+    // Sélectionnez le champ caché pour la notation
+    const notationInput = document.getElementById('notation');
+
+    // Vérifiez si une étoile est déjà sélectionnée par défaut
+    const defaultStar = document.querySelector('.rating input[type="radio"]:checked');
+
+    if (defaultStar) {
+        // Obtenez le numéro de l'étoile sélectionnée
+        const selectedStar = parseInt(defaultStar.value);
+
+        // Parcourez toutes les étoiles
+        stars.forEach(star => {
+            // Si l'étoile est inférieure ou égale à l'étoile sélectionnée, colorez-la en jaune, sinon, laissez-la grise
+            if (parseInt(star.value) <= selectedStar) {
+                star.nextElementSibling.style.color = '#FFD700'; // Colorez l'étoile en jaune
+            } else {
+                star.nextElementSibling.style.color = '#ccc'; // Laissez l'étoile grise
+            }
+        });
+
+        // Mettez à jour la valeur du champ caché "notation" avec la valeur de l'étoile sélectionnée
+        notationInput.value = selectedStar;
+    }
+
+    // Parcourez tous les boutons radio d'étoiles
+    stars.forEach(star => {
+        // Ajoutez un écouteur d'événement pour le clic sur chaque étoile
+        star.addEventListener('click', function() {
+            // Obtenez le numéro de l'étoile sélectionnée
+            const selectedStar = parseInt(this.value);
+
+            // Mettez à jour la valeur du champ caché "notation" avec la valeur de l'étoile sélectionnée
+            notationInput.value = selectedStar;
+
+            // Parcourez toutes les étoiles
+            stars.forEach(star => {
+                // Si l'étoile est inférieure ou égale à l'étoile sélectionnée, colorez-la en jaune, sinon, laissez-la grise
+                if (parseInt(star.value) <= selectedStar) {
+                    star.nextElementSibling.style.color = '#FFD700'; // Colorez l'étoile en jaune
+                } else {
+                    star.nextElementSibling.style.color = '#ccc'; // Laissez l'étoile grise
+                }
+            });
+        });
+    });
+});