Coloration élément lors du passage de la souris
Theo_2059
Messages postés
37
Date d'inscription
Statut
Membre
Dernière intervention
-
Theo_2059 Messages postés 37 Date d'inscription Statut Membre Dernière intervention -
Theo_2059 Messages postés 37 Date d'inscription Statut Membre Dernière intervention -
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 :
Je vous remercie.
EDIT : Ajout des BALISES DE CODE.
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
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:
- Coloration élément lors du passage de la souris
- Quelle touche pour débloquer la souris ? - Guide
- Passage qwerty azerty - Guide
- Souris ordinateur - Guide
- Skillkorp souris logiciel - Forum souris / Touchpad
- Inspecter l'élément mac ✓ - Forum MacOS
2 réponses
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 :
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);
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 :
Mon code HTML est le suivant :
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.
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.
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...
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...
