Bonjour 

Je suis en train de créer un système de notation étoilée avec un des boutons radio et du JavaScript mais certains problèmes surviennent alors que pour moi ca devrait fonctionner.

Voici un lien vers mon projet : https://jsfiddle.net/6jh3q5dt/6/

En autre je ne comprend pas pourquoi, lorsque on clique sur la deuxième étoile et que l'on sors du survol de cette dernière, elle redevient grise alors que le script devrait rentré dans le if de la ligne 33 et laissé l'étoile en gold non ?

Merci pour votre aide ! 

-
Edité par TooKi 5 décembre 2018 à 11:00:01

Hello,

Regarde ce que te donne la console. Ca devrait t'aider

https://jsfiddle.net/6jh3q5dt/7/

Idéalement tu peux aussi utiliser ta console pour mettre des points d'arret

J'aime pas utiliser jquery, j'ai fais sans : 

<form method="post" action="#">
  <input type="radio" name="note"> <span class="etoile">★</span>
  <input type="radio" name="note"> <span class="etoile">★</span>
  <input type="radio" name="note"> <span class="etoile">★</span>
  <input type="radio" name="note"> <span class="etoile">★</span>
  <input type="radio" name="note"> <span class="etoile">★</span>
</form>

* {
  margin: 0;
  padding: 0;
}

input {
  display: none;
}

.etoile {
  color: grey;
  font-size: 3em;
  cursor: pointer;
}

.gold {
  color: gold;
}

.grey {
  color: grey;
}

.black {
  color: black;
}

let note = 0;
let etoiles = document.querySelectorAll('.etoile');

etoiles.forEach((etoile, id) => {
  etoile.addEventListener('click', (elem) => {
    note = (id + 1);
    elem.target.classList.remove('black');
    elem.target.classList.add('gold');
  });
  etoile.addEventListener('mouseenter', (elem) => {
    let cible = elem.target.classList;
    cible.remove('grey');
    cible.remove('gold');
    cible.add('black');
    
    for (let i = 0; i < etoiles.length; i++) {
      let classes = etoiles[i].classList;
      if (i < id) {
        classes.add('gold');
        classes.remove('grey');
        classes.remove('black');
      }
      if (i > id) {
        classes.add('grey');
        classes.remove('black');
        classes.remove('gold');
      }
    }
  });
});

Pour une solution sans les classes:

CSS va convertir ton nom de couleur en une couleur réelle.

"Gold" va devenir quelque chose comme rgb(255, 220, 0)

Quand tu testes ton résultat: if(machin.css("color") == "gold")

Ca ne peut pas être vrai, ça ne sera pas égal à une string "gold".

Essaie de plutôt entrer ta couleur en variable.

let gold = "rgb(255, 220, 0)"

Tu set ton css comme ça:

machin.css("color") = gold

Tu testes ensuite la variable:

if(machin.css("color") == gold)

Mais les classes c'est good, c'était surtout pour expliquer le problème prcédent.

-
Edité par Todostaky 6 décembre 2018 à 12:40:53

Bonjour et merci pour vos réponses 

J'aime bien ta méthode Benevolar mais le problème c'est que je ne vois pas comment faire pour mémoriser la note choisie. En gros quand on choisit une note, si on resurvole les étoiles, la note s'efface et on doit de nouveau la choisir.

Ce que j'aimerais c'est que la note sélectionné reste active, tu vois ce que je veux dire ? 

J'ai un peu modifié ton code pck je préfère que les étoiles passe en gold seulement quand on clique, pas au survol.

http://jsfiddle.net/6jh3q5dt/26/

Sinon bien vu Todostaky ca fonctionne en mettant la couleur dans une variable 

Bonjour TooKi,

Je ne comprends pas pourquoi tu utilises des radios,

Si il n'y a pas de raison spéciale alors voici ce que je te propose :

https://codepen.io/Zonecss/pen/eQqEvy

AliasDmc ton code est super, mais la première rangée d’étoiles marche bien mais la 2ème est un peu buggée

Majoras16Forever a écrit:

AliasDmc ton code est super, mais la première rangée d’étoiles marche bien mais la 2ème est un peu buggée

A mince! sur quel navigateur, peux tu d'écrire se qui bug 

De mon coté j'ai (firefox edge chrome)

iPod Touch (iOS 11.4 => Safari Mobile) ==> les étoiles font n’importe quoi xD Par exemple, je clique sur la 2ème et ça met la 5ème

Je ne serais pas étonné que ça vienne des nth-child css sur les versions safari mobiles.

Ok, c'est bon à savoir

Vérifie hein ... Je suis pas certain.

Oh génial AliasDmc le code est niquel et merci pour les liens aussi c'est cool !

Bonjour je me permet de revenir sur ce sujet car la méthode de AliasDmc fonctionne très bien depuis codepen mais sur mon environnement local j'ai une erreur au niveau du selectEtoileA(etoiles, false, (oEvent.type == 'mouseleave')? form.note.value:oEl.iNote, sClassSlelected);

Voici l'erreur : undefined is not an object (evaluating 'form.note.value')

Du coup les étoiles reste allumé même si on ne fait que les survoler...

Si quelqu'un peut m'aider merci beaucoup !

Bonjour TooKi,

Tu as dù oublier de mettre à jour le HTML

Balise form et l'input type=hidden

J'ai pourtant bien mis à jour le HTML avec le form et le input hidden... Par contre la différence qu'il y a dans mon code est que mon formulaire ne contient pas que le input hidden mais aussi des checkbox etc mais je ne pense pas que ca puisse venir de la.

J'ai également repéré deux autres erreurs JS :

- au niveau du var form =  document.forms["filtreForm"] ca me dit filtreForm is better written in dot notation

- au niveau du etoiles[i].addEventListener('click', function(oEvent) : Functions declared within loops referencing an outer scoped variable may lead to confusing semantincs. (form, selectEtoileA, etoiles)

Voila mon code HTML:

<form method="post" action="consultation_trajet.php" id="filtreForm" class="backWhite radius5">
  <header class="headerRadius">
    <h5> Filtrer votre recherche </h5>
  </header>

	<div class="padding10">
    <div class="bottom50 column">
      <h6> Moyen de transport </h6>
      <div>
        <input type="checkbox" name="voiture" id="voiture" />
				<label for="voiture"> Voiture </label>
      </div>

      <div>
        <input type="checkbox" name="train" id="train" />
				<label for="train"> Train </label>
      </div>

      <div>
        <input type="checkbox" name="avion" id="avion" />
				<label for="avion"> Avion </label>
      </div>
    </div>

    <div class="bottom50 column">
      <h6> Période de départ </h6>

      <div>
        <input type="checkbox" name="matin" id="matin" />
				<label for="matin"> Matin </label>
      </div>

      <div>
        <input type="checkbox" name="soir" id="soir" />
				<label for="soir"> Soir </label>
      </div>
    </div>

    <div class="bottom50">
      <h6> Note du livreur </h6>

			<input type="hidden" name="note" class="bottom50">
		    <span class="etoile">★</span>
		    <span class="etoile">★</span>
		    <span class="etoile">★</span>
		    <span class="etoile">★</span>
		    <span class="etoile">★</span>
		  </input>
    </div>

    <div class="column">
      <div>
        <input type="checkbox" name="avecPhoto" id="avecPhoto" />
				<label for="avecPhoto"> Avec photo </label>
      </div>

      <div>
        <input type="checkbox" name="achatProduit" id="achatProduit" />
				<label for="achatProduit"> Achat </label>
      </div>
    </div>
	</div>
</form>

Re : J'ai fais des test et effectivement tout fonctionne quand je met seulement le input hidden dans le form... Le problème viens donc des divs qui englobe el input.

-
Edité par TooKi 18 décembre 2018 à 15:13:42

Bonjour ,

SVP comment je puisse récupérer leur valeur 2 etoile ou 3 etoile ..etc merci

@MeriemBoubellout Bonjour, merci de ne pas déterrer d'ancien sujet résolu pour une nouvelle question. Créer votre propre sujet.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.