Styler le contenu d'une balise <label>

**labarre2002** · 07/09/2023, 15h22

Bonjour

je désire appliquer un effet color sur le texte contenu dans la balise label

via le JS le soucis est que rien ne se produit.
Le but escompté est que en cliquant sur la mauvaise réponse le svg apparait a droite et le texte devient rouge.

mon code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <fieldset class="question">
                 <legend class="premiere">
                      A quoi sert la fonction va_arg ?
                 </legend>
         <div class="choix">
               <svg fill="red" height="200px" width="200px" version="1.1" id="faux" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 208.891 208.891" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M0,170l65.555-65.555L0,38.891L38.891,0l65.555,65.555L170,0l38.891,38.891l-65.555,65.555L208.891,170L170,208.891 l-65.555-65.555l-65.555,65.555L0,170z"></path> </g></svg>
               <input type="radio" id="first" name="champ"/>
               <label for="first"> A valoriser un argument passé en parametre du main.</label>
         </div>
 
 
              <div class="choix">
                    <svg fill="green" height="200px" width="200px" version="1.1" id="vrai" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 236.988 236.988" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <polygon points="198.098,24.326 87.543,134.881 38.891,86.229 0,125.121 87.543,212.662 236.988,63.217 "></polygon> </g></svg>
                    <input type="radio" id="first2"  name="champ"/>
                    <label for="first2"> A récuperer la la valeur d'un parametre sur une fonction a nombre variable de parametres.</label>
              </div>
    </fieldset>

mon JS:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <script>
 
const first=document.querySelector('#first');
const first2=document.querySelector('#first2');
 
 
const faux=document.querySelector('#faux');
const vrai=document.querySelector('#vrai');
 
first.addEventListener('click',()=> {
  faux.style.opacity="1";
  first.style.color="red";
})
     </script>

Nom : a.jpg
Affichages : 101
Taille : 44,8 Ko

Merci pour les éventuelles pistes .

**Archimède** · 07/09/2023, 18h59

Salut :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        svg{
            visibility: hidden;
        }
    </style>
</head>
<body>
    <fieldset class="question">
        <legend class="premiere">
             A quoi sert la fonction va_arg ?
        </legend>
<div class="choix">
      <svg fill="red" height="15px" width="15px" version="1.1" id="faux" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 208.891 208.891" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M0,170l65.555-65.555L0,38.891L38.891,0l65.555,65.555L170,0l38.891,38.891l-65.555,65.555L208.891,170L170,208.891 l-65.555-65.555l-65.555,65.555L0,170z"></path> </g></svg>
      <input type="radio" id="first" name="champ"/>
      <label for="first"> A valoriser un argument passé en parametre du main.</label>
</div>
 
 
     <div class="choix">
           <svg fill="green" height="15px" width="15px" version="1.1" id="vrai" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 236.988 236.988" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <polygon points="198.098,24.326 87.543,134.881 38.891,86.229 0,125.121 87.543,212.662 236.988,63.217 "></polygon> </g></svg>
           <input type="radio" id="first2"  name="champ"/>
           <label for="first2"> A récuperer la la valeur d'un parametre sur une fonction a nombre variable de parametres.</label>
     </div>
</fieldset>
 
<script>
 
 const first=document.querySelector('#first');
 const first2=document.querySelector('#first2');
  
  
 const faux=document.querySelector('#faux');
 const vrai=document.querySelector('#vrai');
  
 first.addEventListener('click',()=> {
   faux.style.visibility="visible";
   document.querySelector('label[for="first"]').style.color="red";
 });
</script>
</body>
</html>

**labarre2002** · 07/09/2023, 20h37

BOnsoir Archimede

merci de prendre la peine de me répondre

je serai tenté de recopier machinalement ton code , mais il une ligne que je comprends pas

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

  document.querySelector('label[for="first"]').style.color="red";

particulièrement ('label[for="first"]').
merci.

**Archimède** · 08/09/2023, 00h40

Le label avec l'attribut for est là pour dire que cette étiquette est celle liée à l'élément <input> dont l'id est first...
Mais, c'est toi qui utilises au départ la notation : <label for="first"> ! donc tu devrais comprendre ce que tu écris. Je me suis adapté à ton code. Il faut changer la couleur de la police du Label et non celle de l'input type radio...

**labarre2002** · 26/09/2023, 15h00

BOnjour

je viens de modifier mon code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<fieldset class="question">
                 <legend class="premiere">
                      A quoi sert la fonction va_arg ?
                 </legend>
         <div class="choix">
               <svg fill="red" height="200px" width="200px" version="1.1" id="faux" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 208.891 208.891" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M0,170l65.555-65.555L0,38.891L38.891,0l65.555,65.555L170,0l38.891,38.891l-65.555,65.555L208.891,170L170,208.891 l-65.555-65.555l-65.555,65.555L0,170z"></path> </g></svg>
               <input type="radio" id="first" name="champ"/>
               <label for="first"> A valoriser un argument passé en parametre du main.</label>
         </div>
 
 
              <div class="choix">
                    <svg fill="green" height="200px" width="200px" version="1.1" id="vrai" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 236.988 236.988" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <polygon points="198.098,24.326 87.543,134.881 38.891,86.229 0,125.121 87.543,212.662 236.988,63.217 "></polygon> </g></svg>
                    <input type="radio" id="first2"  name="champ"/>
                    <label for="first2"> A récuperer la la valeur d'un parametre sur une fonction a nombre variable de parametres.</label>
              </div>
    </fieldset>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
const saisie=document.querySelector('#saisie');
         const first=document.querySelector('#first');
         const first2=document.querySelector('#first2');
         const faux=document.querySelector('#faux');
         const vrai=document.querySelector('#vrai');
 
 
         first.addEventListener('click',()=> {
          faux.style.visibility="visible";
          document.querySelector('label[for='first']').style.color="red";
          });

j' obtiens un message d'erreur dans la console le css ne prends pas et annule l ' apparition du svg

**NoSmoking** · 26/09/2023, 16h47

Bonjour,
juste comme cela au passage :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.querySelector('label[for='first']').style.color="red";

regarde l'alternance des guillemets et apostrophes.

j' obtiens un message d'erreur dans la console

c'est toujours bon de mentionner celui-ci

**labarre2002** · 26/09/2023, 17h09

@NoSmoking

Bonjour et merci pour ton message

pour ce qui est du méssage

Nom : message.jpg
Affichages : 51
Taille : 19,5 Ko

**labarre2002** · 26/09/2023, 17h22

Nom : col.jpg
Affichages : 51
Taille : 50,6 Ko

je viens d' améliorer mon code quand je clique sur la mauvaise réponse le texte est coloré en rouge puis en vert
quand je clique sur la bonne réponse.

je voudrai que lorsque je passe a la seconde réponse la question précédente retrouve sa couleur par défaut

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  const saisie=document.querySelector('#saisie');
         const first=document.querySelector('#first');
         const first2=document.querySelector('#first2');
         const faux=document.querySelector('#faux');
         const vrai=document.querySelector('#vrai');
 
 
         first.addEventListener('click',()=> {
          faux.style.visibility="visible";
          vrai.style.visibility="hidden";
          document.querySelector('label[for="first"]').style.color="red";
 
          });
 
          first2.addEventListener('click',()=> {
          vrai.style.visibility="visible";
          faux.style.visibility="hidden";
          document.querySelector('label[for="first2"]').style.color="green";
          });

Merci pour un éventuelle reponse

**Pytet** · 27/09/2023, 12h40

Bonjour,

Pour remettre la couleur par défaut, tu peux appliquer la valeur "inherit" sur le 2e label :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 first.addEventListener('click', () => {
   faux.style.visibility = "visible";
   vrai.style.visibility = "hidden";
   document.querySelector('label[for="first"]').style.color = "red";
   document.querySelector('label[for="first2"]').style.color = "inherit";
 });
 
 first2.addEventListener('click', () => {
   vrai.style.visibility = "visible";
   faux.style.visibility = "hidden";
   document.querySelector('label[for="first"]').style.color = "inherit";
   document.querySelector('label[for="first2"]').style.color = "green";
 });

Il serait intéressant de factoriser ton code pour améliorer sa maintenabilité : copier/coller plusieurs fois un code js quasiment identique pour chaque question n'est pas idéal.

Gérer tout le style css via js risque aussi de rendre ton code conséquent. En général on utilise js uniquement pour ajouter/modifier/supprimer des classes css sur les éléments html, puis le style est appliqué via ces classes.

Une autre approche pourrait être l'utilisation des attributs data et de l'état checked des input pour styliser ton questionnaire uniquement en css.
Pour exemple : https://jsfiddle.net/j1q69ao8/

**labarre2002** · 27/09/2023, 19h51

Merci

@Pytet

je suis curieux de savoir comment tu as insérer le svg via le content

Nom : a.jpg
Affichages : 36
Taille : 18,5 Ko

je m attendais a voir ca :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

 <svg fill="red" height="200px" width="200px" version="1.1" id="faux" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 208.891 208.891" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M0,170l65.555-65.555L0,38.891L38.891,0l65.555,65.555L170,0l38.891,38.891l-65.555,65.555L208.891,170L170,208.891 l-65.555-65.555l-65.555,65.555L0,170z"></path> </g></svg>

**Pytet** · 28/09/2023, 13h01

Je n'ai pas utilisé de svg dans mon exemple, j'utilise directement les caractères ✓ et ✗ que j'affiche dans le pseudo-élemént ::before avec la propriété css content.

Il est aussi possible d'insérer le svg dans la propriété content :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.input-reponse[data-correct="false"]:checked::before {
  content: url("data:image/svg+xml,%3Csvg fill='red' height='15px' width='15px' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 208.891 208.891' xml:space='preserve'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M0,170l65.555-65.555L0,38.891L38.891,0l65.555,65.555L170,0l38.891,38.891l-65.555,65.555L208.891,170L170,208.891 l-65.555-65.555l-65.555,65.555L0,170z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  color: red;
  margin-left: -20px;
}

https://jsfiddle.net/p3uq4tjs/

Pour encoder ton svg afin de pouvoir l'utiliser en css, tu peux utiliser ce site :
https://yoksel.github.io/url-encoder/

Styler le contenu d'une balise <label>

CSS

Discussions similaires

Partager

Partager