Changer couleur bouton selon variable

Changer couleur bouton selon variable - Javascript/Node.js - Programmation

Marsh Posté le 25-08-2015 à 05:37:35    

Bonjour à tous ! :)
 
Je viens vers vous car j’ai une question que je n’arrive pas à résoudre malgré mes recherches.
 
Le sujet est tout simple :
J’ai réalisé une page en HTML/CSS avec un peu de javascript. Dans cette page, l’utilisateur est amené à cliquer sur des boutons.
Je stocke le choix d’un utilisateur dans une variable en localStorage afin de pouvoir en garder une trace à tout instant et lors des prochaines connexions à ma page.
Ce que j’aimerai réaliser, c’est qu’au moment où l’utilisateur a cliqué sur un des boutons, celui-ci change de couleur afin de préciser que le choix de l’utilisateur s’est orienté vers ce bouton. Ainsi quand il reviendra sur cette page dans le futur, il verra que c'était ce bouton qui était sélectionné.
 
Sur internet et même sur ce forum j’ai trouvé pas mal de questions similaires, mais quand est venu le moment d’appliquer les différentes solutions, jamais ça ne marchait.
Je vous met donc mon code ci-dessous avec la solution que j’ai tenté de réaliser (et qui ne marche pas donc).
Si quelqu’un a une idée sur comment ça peut marcher je vous en serai reconnaissant.
 
Je vous remercie ;)
 
Script javascript et code HTML:

Code :
  1. function WhatVoiceAmIUsing()
  2. {
  3.       property = document.getElementById(localStorage.voiceName);
  4.       property.style.backgroundColor = '#FF0000';
  5. }
  7. <a id="my-id1" class="buttonlink"><button onclick="SpeakFunction('OM', 'voice-number-1')" class="myButton" style="width:18%;left:10%;top:50%;height:10%;">Button1</button></a>


Notez que le localStorage.voiceName ne reçoit que des valeurs qui ont le meme nom que les id des boutons.
 
Partie CSS:

Code :
  1. .myButton {
  2.       -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  3.       -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  4.       box-shadow:inset 0px 1px 0px 0px #ffffff;
  5.       background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
  6.       background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  7.       background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  8.       background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  9.       background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  10.       background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
  11.       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
  12.       background-color:#f9f9f9;
  13.       -moz-border-radius:6px;
  14.       -webkit-border-radius:6px;
  15.       border-radius:6px;
  16.       border:1px solid #dcdcdc;
  17.       display:inline-block;
  18.       cursor:pointer;
  19.       padding:6px 24px 6px 24px;
  20.       position:fixed;
  21.       vertical-align:middle;
  22.      -webkit-touch-callout: none;
  23.      -webkit-user-select: none;
  24.      -khtml-user-select: none;
  25.      -moz-user-select: none;
  26.      -ms-user-select: none;
  27.       user-select: none;
  28. }
  30. .myButton:hover {
  31.       background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
  32.       background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  33.       background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  34.       background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  35.       background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  36.       background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
  37.       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
  38.       background-color:#e9e9e9;
  39. }
  40. .myButton:active {
  41.       -webkit-touch-callout: none;
  42.       -webkit-user-select: none;
  43.       -khtml-user-select: none;
  44.       -moz-user-select: none;
  45.       -ms-user-select: none;
  46.       user-select: none;
  47. }
  49. .buttonlink{
  50.       text-decoration:none;
  51.       position:fixed;
  52.       font-family:arial;
  53.       -webkit-touch-callout: none;
  54.       -webkit-user-select: none;
  55.       -khtml-user-select: none;
  56.       -moz-user-select: none;
  57.       -ms-user-select: none;
  58.       user-select: none;
  59. }


 
J'espere que le code ci-dessus vous suffit. Comme vous pouvez vous en douter ce n'est pas moi qui est ecrit le CSS...
 
Encore merci :)

Reply

Marsh Posté le 25-08-2015 à 05:37:35   

Reply

Marsh Posté le 28-08-2015 à 04:48:23    

Personne ne peut m'aider?
 
[:moon06]

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed