Changer plusieurs fois la couleur d'un texte en cliquant sur des boutons

**CASEVIDE** · 03/11/2017, 15h08

Bonjour,

Pour commencer j'arrive à m'en sortir en html et css mais je ne suis pas du tout un as en script, et je pense que j'ai besoin de passer par un script pour réaliser le projet que j'ai en tête.

Alors, j'ai le but de modifier un texte via deux boutons. A la base le texte est en gris 50%, plus on clique sur le premier bouton plus le texte tend vers le blanc et à l'opposé plus on clique sur le second bouton plus le texte tend vers le noir.
Ainsi, au fur et à mesure des clics, on peut constater l'évolution de la couleur du texte, en sachant que j'aimerai que ça "perdure sur le temps", que ça ne revienne pas à un gris 50% à chaque actualisation de la page.

Étant pas du tout familier au script j'avoue ne pas savoir vers où commencer ! Si ça ne vous parait pas clair pour le traduire en script, n'hésitez pas à m'en demander plus !

Merci d'avance si vous prenez le temps de me répondre.

Cordialement,
CaseVide

**mathieu** · 03/11/2017, 19h08

En ce qui concerne les boutons qui modifient une couleur, c'est faisable en JavaScript. À chaque action sur le bouton, le code JavaScript modifiera le code CSS qui définit la couleur.

Par contre pour garder en "mémoire" le choix de la couleur, il faudra utiliser un langage côté serveur comme PHP. Il faudra définir si la couleur est affiché seulement à l'utilisateur courant ? Et si cet utilisateur c'est identifié ? Ou alors la couleur modifiée est montrée à tous les visiteurs du site ?

**Archimède** · 03/11/2017, 21h25

Pour la partie javascript, un bout de 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
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
48
49
50
51
52
53
54
55
56
57
58
59
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page Title</title>
</head>
 
<body>
<script>
    var TabBut=[],TabFunctionClic=[];
    var x=0.5;
    var montexte="Chaîne de caractères et canal alpha.";
    var divtext=document.createElement('div');
     divtext.style.width=700+"px";
     divtext.style.height=40+"px";
     divtext.style.position="absolute";
     divtext.style.left=200+"px";
     divtext.style.top=10+"px";
     divtext.style.font= "bold 40px arial";
     divtext.style.color= 'rgba(0,0,0,'+x+')';
     divtext. textContent =montexte;
     document.body.appendChild(divtext);
     
     TabFunctionClic[0]=function(){
      if (x>0.00) x-=0.10;
      divtext.style.color= 'rgba(0,0,0,'+x+')'; 
      divtext.textContent =montexte;
    };
    
    TabFunctionClic[1]=function(){
      if (x<1) x+=0.10;
      divtext.style.color= 'rgba(0,0,0,'+x+')'; 
      divtext.textContent =montexte;
    };
    
 
    for(var i=0;i<=1;i++){
        TabBut[i]=document.createElement('input');
        TabBut[i].type='button';
        TabBut[i].style.width=160+"px";
        TabBut[i].style.height=40+"px";
        TabBut[i].style.position="absolute";
        TabBut[i].style.left=10+"px";
        
       if (i===0){
        TabBut[i].style.top=10+"px";
        TabBut[i].value="éclaicir";
        }
        else {
            TabBut[i].style.top=50+"px";
            TabBut[i].value="foncer";
        }
        document.body.appendChild(TabBut[i]);
        TabBut[i].addEventListener('click',TabFunctionClic[i]);
    }
</script>
</body>
</html>

Après pour l'actualisation de la page, c'est côté serveur en effet...

Invité · 03/11/2017, 22h25

Bonjour,

Si ça ne concerne que cet utilisateur, pas (nécessairement) besoin de PHP : on enregistre via JS dans un cookie.

**CASEVIDE** · 04/11/2017, 00h11

mathieu, pour le coup l'idée est de le poser sur un site et ensuite d'effectivement le garder en mémoire afin de le montrer à tous les visiteurs du site et que chacun puisse cliquer pour modifier la couleur, pour qu'à terme on puisse voir une modification générale, mais du coup ça m'intéresse aussi de savoir comment le faire.

Archimède, le script est nickel, mais effectivement j'avais oublié de mentionner un détail important, le background du body est aussi en gris 50%, ce qui fait que le texte est de la même couleur que le fond au début, et qu'il s'assombrit/s'éclaircit au fur et à mesure que l'on clique. Je vois (et je ne pense pas me tromper, mais je ne suis pas sûr, hein !) que tu as fait la modification par rapport à la transparence du texte. du coup j'ai une question, est ce que c'est possible de transformer sa couleur et non sa transparence, pour amener vers les différents tons de gris, comme tu l'as fait avec la transparence ?

jreaux62, merci pour l'idée, je pense qu'au début, ce sera que "l'utilisateur" pour voir si ça fonctionne et à terme, c'est d'effectivement le mettre en réseau pour que tout le monde puisse le voir et le faire évoluer.

Et enfin, désolé, je suis vraiment une bille en script !!

**CASEVIDE** · 04/11/2017, 00h29

c'est bon Archimède, j'ai trouvé !

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
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>body{background-color : rgb(127,127,127);}</style>
    <title>Page Title</title>
</head>
 
<body>
<script>
    var TabBut=[],TabFunctionClic=[];
    var x=127;
    var montexte="Chaîne de caractères et canal alpha.";
    var divtext=document.createElement('div');
     divtext.style.width=700+"px";
     divtext.style.height=40+"px";
     divtext.style.position="absolute";
     divtext.style.left=200+"px";
     divtext.style.top=10+"px";
     divtext.style.font= "bold 40px arial";
     divtext.style.color= 'rgb('+x+','+x+','+x+')';
     divtext. textContent =montexte;
     document.body.appendChild(divtext);
     
     TabFunctionClic[0]=function(){
      if (x>0) x-=5;
      divtext.style.color= 'rgb('+x+','+x+','+x+')'; 
      divtext.textContent =montexte;
    };
    
    TabFunctionClic[1]=function(){
      if (x<255) x+=5;
      divtext.style.color= 'rgb('+x+','+x+','+x+')'; 
      divtext.textContent =montexte;
    };
    
 
    for(var i=0;i<=1;i++){
        TabBut[i]=document.createElement('input');
        TabBut[i].type='button';
        TabBut[i].style.width=160+"px";
        TabBut[i].style.height=40+"px";
        TabBut[i].style.position="absolute";
        TabBut[i].style.left=10+"px";
        
       if (i===0){
        TabBut[i].style.top=10+"px";
        TabBut[i].value="foncer";
        }
        else {
            TabBut[i].style.top=50+"px";
            TabBut[i].value="éclaicir";
        }
        document.body.appendChild(TabBut[i]);
        TabBut[i].addEventListener('click',TabFunctionClic[i]);
    }
</script>
</body>
</html>

**mathieu** · 04/11/2017, 09h51

l'étape suivante est d'envoyer les choix de couleur au serveur pour les enregistrer
Cela peut se faire par exemple avec jQuery comme cela :
https://javascript.developpez.com/faq/jquery/?page=Ajax

Si vous avez des questions pour cette étape, vous pouvez créer une discussion dans le forum AJAX :
https://www.developpez.net/forums/f4...ipt-dart/ajax/

**Archimède** · 04/11/2017, 10h23

Très bien, il suffisait de faire varier l'intensité de niveau de gris...
Pour le rafraichissement, tu peux sans doute t'en sortir avec localStorage ou sessionStorage si ça ne concerne que cet utilisateur... A voir

Invité · 04/11/2017, 11h37

Bon.
Après, on n'est pas obligé de tout générer en JavaScript :

Code html :

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

1
2
3
<div id="montexte">Hello the World !</div>
<button type="button" id="txt-plus">foncer</button>
<button type="button" id="txt-moins">éclaircir</button>

Code css :

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
body {
  background-color: rgb(127, 127, 127);
}
#montexte {
  position: absolute;
  width: 700px;
  height: 40px;
  left: 200px;
  top: 10px;
  font: bold 40px Arial;
}
#txt-plus {
  position: absolute;
  width: 160px;
  height: 40px;
  left: 10px;
  top: 10px;
}
#txt-moins {
  position: absolute;
  width: 160px;
  height: 40px;
  left: 10px;
  top: 50px;
}

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
var x = 127;
 
var divtext = document.getElementById("montexte");
divtext.style.color = "rgb(" + x + "," + x + "," + x + ")";
 
var txtplus = document.getElementById("txt-plus");
txtplusClic = function() {
  if (x > 0) x -= 5;
  divtext.style.color = "rgb(" + x + "," + x + "," + x + ")";
};
txtplus.addEventListener("click", txtplusClic);
 
var txtmoins = document.getElementById("txt-moins");
txtmoinsClic = function() {
  if (x < 255) x += 5;
  divtext.style.color = "rgb(" + x + "," + x + "," + x + ")";
};
txtmoins.addEventListener("click", txtmoinsClic);

Le CSS et HTML sont, à mon avis, plus simple à modifier / positionner.

Un CSS minimaliste :

Code css :

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

1
2
3
4
5
6
7
8
9
body {
  background-color: rgb(127, 127, 127);
}
#montexte {
  font: bold 40px Arial;
}
#txt-plus, #txt-moins {
  padding:5px;
}

**Archimède** · 05/11/2017, 12h08

J'ai tenté le coup avec storage et pour le rafraichissement de la page, ça a l'air de fonctionner... Je n'ai pas fait de séparation HTML, CSS, javascript, je n'ai pas le temps et puis pour toi, c'est plus simple pour tester... (1 simple copier-coller plutôt que trois).

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>body{background-color : rgb(127,127,127);}</style>
    <title>Page Title</title>
</head>
 
<body>
<script>
    var TabBut=[],TabFunctionClic=[];
    var x=127;
    if(window.localStorage.getItem('valeurx')) x = parseInt(window.localStorage.getItem('valeurx'));
    
    const montexte="Chaîne de caractères et niveaux de gris.";
    var divtext=document.createElement('div');
     divtext.style.width=700+"px";
     divtext.style.height=40+"px";
     divtext.style.position="absolute";
     divtext.style.left=200+"px";
     divtext.style.top=10+"px";
     divtext.style.font= "bold 40px arial";
     divtext.style.color= 'rgb('+x+','+x+','+x+')';
     divtext. textContent =montexte;
     document.body.appendChild(divtext);
 
     TabFunctionClic[0]=function(){
      if (x>0) x-=5;
      divtext.style.color= 'rgb('+x+','+x+','+x+')'; 
      divtext.textContent =montexte;
      addStorage();
    };
 
    TabFunctionClic[1]=function(){
      if (x<255) x+=5;
      divtext.style.color= 'rgb('+x+','+x+','+x+')'; 
      divtext.textContent =montexte;
      addStorage();
    };
 
 
    for(var i=0;i<=1;i++){
        TabBut[i]=document.createElement('input');
        TabBut[i].type='button';
        TabBut[i].style.width=160+"px";
        TabBut[i].style.height=40+"px";
        TabBut[i].style.position="absolute";
        TabBut[i].style.left=10+"px";
 
       if (i===0){
        TabBut[i].style.top=10+"px";
        TabBut[i].value="foncer";
        }
        else {
            TabBut[i].style.top=50+"px";
            TabBut[i].value="éclaicir";
        }
        document.body.appendChild(TabBut[i]);
        TabBut[i].addEventListener('click',TabFunctionClic[i]);
    }
    
    function addStorage(){
     var storage=window.localStorage;
      if(storage)
            storage.setItem('valeurx',x.toString());
      else $('.testSession').html('le sessionStorage n\'est pas implémenté sur ce navigateur');
    }
</script>
</body>
</html>

**NoSmoking** · 05/11/2017, 12h12

Bonjour,

Je n'ai pas fait de séparation HTML, CSS, javascript, je n'ai pas le temps et puis pour toi, c'est plus simple pour tester... (1 simple copier-coller plutôt que trois).

pour les fichiers de test tu peux tout mettre dans la page, la séparation sera quand même effective et le code bien plus lisible et facile à maintenir/modifier

**Archimède** · 05/11/2017, 12h14

Ok, merci pour l'info.

**NoSmoking** · 05/11/2017, 12h21

Un autre avantage est que si tu passes ton fichier en « production » tu peux récupérer facilement les différentes couches ( CSS, JS) pour les externaliser.

Changer plusieurs fois la couleur d'un texte en cliquant sur des boutons

JavaScript

Discussions similaires

Partager

Partager