Discussion :

[ptiiiilu]

Bonjour,
Le Javascript n'est vraiment pas mon fort et je bute sur un exercice que je n'arrive pas a corriger. Il s'agit de l'énoncé suivant:

..........................
Créer une page contenant un champ de saisie (maxi 15 caractères).

Lorsque l'internaute commence à entrer son texte, un message s'affiche dans la page afin de lui indiquer le nombre de caractères restants.

Lorsqu'il ne reste plus que 7 caractères possibles, le champ devient orange.

Lorsqu'il ne reste plus que 3 caractères possibles, le champ devient rouge.


Voici mon

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
15
16
17
18
19
20
21
	function control(){
            var texte = this.value;
			var longueur = 0;
			longueur=texte.length;
			limite = 15-longueur;
			var message = "Il ne vous reste plus que "+limite+" caractère(s) disponible(s).";
			document.getElementById("alerte").innerHTML=message;
			if(limite<=15 && limite>=8){
                document.Formulaire.saisie.getElementById ="normal";
            }
			else if(limite<8 && limite>=4){
				document.monFormulaire.saisie.getElementById ="attention";
			}
			else if(limite<4){
				document.Formulaire.saisie.getElementById="fin";
			}
 
		}
        window.addEventListener("load",function(){
            document.getElementById("saisie").addEventListener("keyup",control); 
        });

Voici mon

Code CSS :

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

1
2
3
4
5
6
7
8
9
    .normal {
            background: white;
        }
		.attention{
			background: orange;
		}
		.fin{
			background: red;
		}

Or quand je tape mon texte, le background ne devient pas rouge, on m'a dit que j'appliquais des classes non définies en CSS. Est ce le "alert?"
Cordialement

[Golgotha]

Bonjour ptiiiilu,

Si tu veux changer de class CSS la ligne suivante est incorrect :

Code :

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

document.monFormulaire.saisie.getElementById ="attention";

Voici une façon de faire :

Code :

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

1
2
3
 
            document.getElementById("saisie").className = "";
            document.getElementById("saisie").classList.add('attention');

Si tu as besoin de plus d'explication, n'hésite pas à demander.