I want to change my button color when it clicked, and i also want to keep the changes, i mean the button is activated or not even when the page is reloaded.

this is my code---

<a id="mylink" class="allow" href="#"><button class="btn btn-default btn-xs">{% trans %}Allow{% endtrans %}</button></a>

this the the script ---

<script type="text/javascript">
window.onload = function() {
  document.getElementById('mylink').onclick = function() {
    this.style.color = 'green';
  }
}
</script>

But it is not changing the color and also not showing it is active or not when reloading. Can anyone help me to solve this problem. Thanks a lot in advanced.

I want to change my button color when it clicked, and i also want to keep the changes, i mean the button is activated or not even when the page is reloaded.

this is my code---

<a id="mylink" class="allow" href="#"><button class="btn btn-default btn-xs">{% trans %}Allow{% endtrans %}</button></a>

this the the script ---

<script type="text/javascript">
window.onload = function() {
  document.getElementById('mylink').onclick = function() {
    this.style.color = 'green';
  }
}
</script>

But it is not changing the color and also not showing it is active or not when reloading. Can anyone help me to solve this problem. Thanks a lot in advanced.

• javascript
• css
• twitter-bootstrap

Share Improve this question Follow edited Aug 10, 2015 at 11:16 Siguza 24.1k66 gold badges5555 silver badges9999 bronze badges asked Jul 21, 2015 at 16:13 Istiak MahmoodIstiak Mahmood 2,42288 gold badges3434 silver badges8484 bronze badges 3

• Do you need this to have effect during session only or even if the user closes the browser and es back later? – noderman Commented Jul 21, 2015 at 16:17
• i need to have this even when i close the browser and e back later ... – Istiak Mahmood Commented Jul 21, 2015 at 16:23
• So use localStorage. I've provided example for sessionStorage and will update it – noderman Commented Jul 21, 2015 at 16:24

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Without storing the state on a server, you need to use sessionStorage or localStorage

SUBSTANTIAL UPDATE: I realize you are also using color while you should be using background-color. Using $(document).ready() and jquery:

<script type="text/javascript">
$( document ).ready(function() {
  if(localStorage.getItem('isCliked'){
      $('#mylink').css('background-color','green');
  }
  $('#mylink').on('click',function() {
    $('#mylink').css('background-color','green');
    // set the value upon clicking
    localStorage.setItem('isCliked', true)
  });
});

</script> 

Also, since you are using Bootstrap, you could use the class manipulation from jquery

<script type="text/javascript">
$( document ).ready(function() {
  if(localStorage.getItem('isCliked'){
      $( "#mylink" ).addClass( 'btn-success' );

      $( "#mylink" ).removeClass( 'btn-default' );
  }
  $('#mylink').on('click',function() {
    $( this ).addClass( 'btn-success' );

    $( this ).removeClass( 'btn-default' );
    // set the value upon clicking
    localStorage.setItem('isCliked', true)
  });
});

</script> 

Important: this solution will not work if the user changes devices, since the button state is stored locally. If you want a strong solution, you need to store the state on the server.

  $('#mylink').on('click',function() {
    <AJAX CALL TO SERVER TO STORE STATE>
  });

In such case, your initial button rendering should already take this into account (check on server before serving your <a>) -or- you will need another ajax call upon $(document).ready(). It depends on your design and requirements.

<script type="text/javascript">
$( document ).ready(function() {

  <AJAX CALL TO QUERY THE SERVER ABOUT THE BUTTON STATE>
  <RENDER BUTTON ACCORDING TO RESULTS>

  $('#mylink').on('click',function() {
   <AJAX CALL TO SERVER TO STORE STATE>
  });
});

</script> 

When a webpage is reloaded previous states are forgotten by the browser until and unless you use some persistence (like local storage or something) and check saved data and restore previous stage of any element on page reload by yourself.

you can use this for anchor tag.

a:visited { 
    background-color: yellow;
}

If you want to change color of button you can do it using jquery, but if you want to reload page and still button color shows in updated color : in this case you need to set cookie or session values for that color and apply to the button.