Sujet Précédent Sujet Suivant

Coloration élément lors du passage de la souris

Fermé
Theo_2059 Messages postés 37 Date d'inscription vendredi 5 juillet 2019 Statut Membre Dernière intervention 22 février 2023 - Modifié le 7 févr. 2021 à 13:42
Theo_2059 Messages postés 37 Date d'inscription vendredi 5 juillet 2019 Statut Membre Dernière intervention 22 février 2023 - 7 févr. 2021 à 14:21
Bonjour,

J'ai tenté de faire une methode (dans le cadre d'un td) qui me permette de colorier le background d'UN SEUL élément à la fois en javascript, mais ca ne fonctionne pas. Mes conditions dans les if() ne sont pas coorrectes mais je ne sais pas comment pallier le problème.

Voici mon code : 
var couleur = ['red', '#00FFFF'/*bleu clair*/, 'pink', 'orange'];
var compteur = 0;

function select2(e) {
  if((e.target.style.backgroundColor == '') && (compteur == 0)) {
   e.target.style.backgroundColor = couleur[1];
   compteur ++;
  }
  else if(e.target.style.backgroundColor == couleur[1] && (compteur == 1)) {
   e.target.style.backgroundColor = '';
   compteur --;
  }
 }
 document.body.addEventListener("click", select2);

Je vous remercie.

EDIT : Ajout des BALISES DE CODE.
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024 4 689
7 févr. 2021 à 13:50
Bonjour,

Déjà, à l'avenir, merci d'utiliser les balises de code pour poster ton code sur le forum
Explications ( à lire ENTIEREMENT !! ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite :
- A quoi sert ta variable compteur au juste ?
- Quel est le code html qui va avec ce code javascript ?
- A quoi te sert ta variable "couleur" alors que tu sembles n'en utiliser qu'une dans ton code ?
- As tu regardé dans la console de ton navigateur pour voir si tu y as des erreurs ?

et enfin :
- As tu essayé d'ajouter des console.log dans ton code pour essayer de voir si tu rentres dans tes conditions ... et la valeurs des différentes variables ?
Par exemple : 
var couleur = ['red', '#00FFFF'/*bleu clair*/, 'pink', 'orange'];
var compteur = 0;

function select2(e) {
  console.log('Je suis bien entré dans la fonction select2',e);
  let elementBackGroundColor = e.target.style.backgroundColor;
  console.log('Couleur actuelle',elementBackGroundColor);
  console.log('compteur',compteur);
  
  if((elementBackGroundColor == '') && (compteur == 0)) {
    console.log('Je suis dans le if');
    e.target.style.backgroundColor = couleur[1];
    compteur ++;
    
  } else if(elementBackGroundColor == couleur[1] && (compteur == 1)) {
    console.log('Je suis dans le else');
    e.target.style.backgroundColor = '';
    compteur --;
  }
 }
 
 console.log("J'attache l'event CLICK au body de la page");
 document.body.addEventListener("click", select2);

0
Réponse 2 / 2
Theo_2059 Messages postés 37 Date d'inscription vendredi 5 juillet 2019 Statut Membre Dernière intervention 22 février 2023
Modifié le 7 févr. 2021 à 14:08
Merci pour ta réponse.

Ma variable compteur me permet (si elle fonctionnait) de ne modifier le fond que d'un seul élément à la fois. J'ai réussi à faire le code pour modifier le fond d'éléments sans se soucier de leur nombre mais cette contrainte me bloque.

Je met le code si jamais pour colorier le fond d'élément sans problème de nombre : 

function select(e) {
    if (e.target.style.backgroundColor == couleur[2]) {
      e.target.style.backgroundColor = '';
    } else {
      e.target.style.backgroundColor = couleur[2];
    }
  }
 document.body.addEventListener("click", select);


Mon code HTML est le suivant : 

<body>
  <!-- Your XHTML5 code goes here -->

  <h1 id='titre'>TD2</h1>
  <h2 class='sous-titre'>Ingrédients pour tiramisù</h2>
  <div>
    <p>Voici un lien pour accéder à une recette : <a href="https://www.marmiton.org/recettes/recette_tiramisu-recette-originale_12023.aspx">recette tiramisù</a></p>
    <p>Voici une liste d'ingrédients pour faire <span id='recette'>un tiramisù</span></p>
    <ul>
      <!--j'utilise la balise ul car l'ordre de ma liste 'a pas d'importance-->
      <ol>Pour faire la préparation principale</ol>
      <ul>
        <li>500g mascarpone</li>
        <li>250g de sucre</li>
        <li>4 blancs d'oeuf</li>
        <li>30 biscuits à la cuillère / boudoirs</li>
        <li>25 cL de café noir non sucré</li>
      </ul>
      <ol>Pour la décoration</ol>
      <ul>
        <li>Du cacao en poudre</li>
        <li>Du sucre glace</li>
      </ul>
    </ul>
  </div>
  <h2 class='sous-titre'>Sous-titre2</h2>
</body>


Ma variable 'couleur' me permet de changer facilement de couleur avec simplement l'indice du tableau sans avoir à modifier la couleur elle-même. Selon le prof, c'est plus adapté dans le cadre d'un futur travail en entreprise.

Je n'ai aucune erreur dans la console.

Pour ce qui est de l'entrée dans les boucles elle se fait bien mais c'est la variable compteur qui n'est pas correcte; enfin elle ne se modifie pas comme je le souhaite et du coup je n'entre pas dans les boucle comme je devrais.
0
jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024 4 689
7 févr. 2021 à 14:13
Tu as testé le code que je t'ai donné ?
Qu'est-ce que ça t'affiche dans la console ?

Et si ta variable compteur doit juste osciller entre 0 et 1 .. il n'y pas d'utilité de l'incrémenter...
Il suffit de fixer sa valeur à zéro ou un en fonction de tes besoins...
0
Theo_2059 Messages postés 37 Date d'inscription vendredi 5 juillet 2019 Statut Membre Dernière intervention 22 février 2023 > jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024
7 févr. 2021 à 14:20
Je t'avoue que j'ai un peu de mal à suivre les valeurs données dans la console mais j'ai la possibilité de sélectionner plusieurs éléments alors que je ne devrais pas.

0
Theo_2059 Messages postés 37 Date d'inscription vendredi 5 juillet 2019 Statut Membre Dernière intervention 22 février 2023 > Theo_2059 Messages postés 37 Date d'inscription vendredi 5 juillet 2019 Statut Membre Dernière intervention 22 février 2023
7 févr. 2021 à 14:21
Quand je clique su un élément avec un fond transparent le compteur revient à 0.
0

Discussions similaires

Comment "inspecter l'élément" sur Mac ?
enzo2501 -
atrix -

13 réponses
Problème Chronopost : Pas d'avis de passage !!
sweetinky -
Camille -

40 réponses
Impossible de copier car cet élément est trop volumineux
Alan_Cohen -
Utilisateur anonyme -

9 réponses
Comment changer le sens de la souris avec un double écran ?
Sviet531 -
Yt_mando -

51 réponses
Comment inspecter l'élément sur mobile ?
Sally -
Sally -

2 réponses