none
Button which changes colour when clicked and remains that colour RRS feed

  • Question

  • Hello,

    Bit of a WE beginner so please bear with me. 

    I'm looking to create some buttons (most probably interactive I'm guessing) which when clicked by the user will change colour and stay that colour.  I have got to this stage fine by using "on click" and "on mouse up" etc. but the two things I cannot figure out:

    1. I need to button to be a toggle, so when the user clicks once it changes colour, when the user clicks it again it goes back to original colour. 
    2. I need the page to remember the toggles set by the previous user.  i.e. if there are 4 buttons and the user clicks 2 to change their colour, when the page is refreshed, these values remain until the buttons are clicked again by another user.  

    Hoping that makes sense to someone! 

    Many thanks, 

    BD



    • Edited by BD1.0 Thursday, March 28, 2019 8:24 PM
    Thursday, March 28, 2019 8:22 PM

All replies

  • I assume you mean you are a EW beginner (Expression Web).  : )

    What kind of page is this?  Just html, not asp.net or PHP?

    Storing a user's decisions after a page refresh requires some kind of scripting technology and also a way to store that information.  Your best bet is to create and read cookies.

    Toggling and setting cookies can be done fairly easily with JavaScript (or JQuery, a JavaScript library).

    I don't have time to write a detailed how-to right now, but you can get started with the idea by checking the following link about  js.cookie.js , a small javascript file that makes writing and reading cookies very simple: https://www.npmjs.com/package/js-cookie  Look at the Installation section, and note the download link right above the example for including the script in your page.  Look at the Basic Usage section for some examples of setting and reading cookies.

    For the toggle part, here's a page with a one button sample, toggling with JavaScript.  It does not have the added logic of setting and checking cookies when changing the color.

    <!DOCTYPE html>
    <html>
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <style type="text/css">
    .redbackground {
    	background-color: red;
    }
    </style>
    </head>
    
    <body>
     <input type="button" id="button1" class="redbackground" onclick="colorChange()" value="Click Here" />
    <script type="text/javascript">
        function    colorChange() { 
    var color = document.getElementById('button1').style.backgroundColor;
    
    if (color !== 'green') {
        color = 'green';
        document.getElementById('button1').style.backgroundColor = color;       
    
        }
    else if (color == 'green') {
        color = 'red';
        document.getElementById('button1').style.backgroundColor = color; 
    
        }
    }
    
    </script>
    </body>
    
    </html>
    

    Get started with this, and when I have time I'll get back to any questions you have.


    Kathleen Wilber
    BrightWillow - Asp.Net Applications

    Friday, March 29, 2019 4:07 PM
  • OK, I've had time to put together a complete example with multiple buttons, and a button that will remove cookies for testing purposes.  This assumes you have downloaded the js.cookies.js file and put it in a "scripts" folder.

    Buttons will default to red unless they read a cookie setting it to green.  Refreshing the page - or going back to the page later - will display the last cookie values as the button colors, when they exist.

    <!DOCTYPE html>
    <html>
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <script src="/scripts/js.cookie.js"></script>
    
    <style type="text/css">
    .isred {
    	background-color: red;
    }
    </style>
    
    </head>
    
    <body>
    
    <input id="button1" class="isred"  onclick="colorChange('button1')" type="button" value="Click Here" />
    <input id="button2" class="isred"  onclick="colorChange('button2')" type="button" value="Click Here" />
    <input id="button3" class="isred"  onclick="colorChange('button3')" type="button" value="Click Here" />
    <!-- This  next button is just for testing, letting you remove the button cookies -->
    <input id="button4"  onclick="removeCookies()" type="button" value="Remove Cookies for Testing" />
    <p>Here are three buttons, with a default starting color of red. Click to toggle 
    red and greeen. If you refresh the page, or return to this page your last colors 
    will be remembered in cookies, and will be the starting color.</p>
    
    
    <script type="text/javascript">
    window.onload = function () {
    	colorSet('button1');
    	colorSet('button2');
    	colorSet('button3');
    }
    
    function colorSet(abutton)
    {
    	var color = Cookies.get(abutton);
    	if(color == null)
    	{
    		color = 'red';
    		//Remove the alert after done testing
    		alert("cookie not there");
    	}
    	//Remove the else { .. } condition after done testing
    	else
    	{
    		alert("cookie has value" + color);
    	}
    
    	document.getElementById(abutton).style.backgroundColor = color;
    }
    function colorChange(abutton) { 
    var color = document.getElementById(abutton).style.backgroundColor;
    
    if (color !== 'green') {
        color = 'green';
        document.getElementById(abutton).style.backgroundColor = color;       
    	Cookies.set(abutton, color);
    	//Remove the next two lines for the alert, after you are done testing
    	var alertmsg = abutton + ' ' + Cookies.get(abutton);
    	alert(alertmsg);
        }
    else if (color == 'green') {
        color = 'red';
        document.getElementById(abutton).style.backgroundColor = color; 
    	Cookies.set(abutton, color);
    	//Remove the next two lines for the alert, after you are done testing
    	var alertmsg = abutton + ' ' + Cookies.get(abutton);
    	alert(alertmsg);
        }
    }
    //Remove this function after you are done testing
    function removeCookies() {
    	Cookies.remove('button1');
    	Cookies.remove('button2');
    	Cookies.remove('button3');
    }
    </script>
    </body>
    </html>


    Kathleen Wilber
    BrightWillow - Asp.Net Applications


    • Edited by KathyW2 Saturday, March 30, 2019 4:09 AM
    Saturday, March 30, 2019 4:08 AM