color change of <p:commandButton> after every onclick

Question

my code in jsf page is shown below,with below code i am getting popup for every click but at the same time i want to change color p:commandButton for every click.

<h:form id="form">

 <p:commandButton id="button01" oncomplete="PF('test01').show()" value="sysno_01" icon="button" update=":form01:dialog01" />
</h:form>

  <h:form id="form01">
         <p:dialog header="Login" widgetVar="test01" id="dialog01"
            resizable="true" showEffect="explode" hideEffect="explode">

            <p:panelGrid id="display01" columns="2">
            <h:outputText value=" First name" />
            <h:inputText id="fnme01" value="#{studentLoginBean.studentname}" />
            <h:outputText value=" last name" />
            <h:inputText id="lnme01" value="#{studentLoginBean.lastname}" />
            </p:panelGrid>
            <h:commandButton actionListener="#{studentLoginBean.login}" value="Login">
             <f:param name="action" value="01" />
            </h:commandButton>  
            <h:commandButton actionListener="#{studentLoginBean.logout}" value="Logout">
                <f:param name="action" value="01" />
            </h:commandButton>
        </p:dialog> 
</h:form>

Answer 1

Try this : put class="changeColor" for each button as shown below

<h:commandButton actionListener="#{studentLoginBean.login}" value="Login" class="changeColor">
         <f:param name="action" value="01" />
</h:commandButton>  
<h:commandButton actionListener="#{studentLoginBean.logout}" value="Logout" class="changeColor">
            <f:param name="action" value="01" />
</h:commandButton>

Then register a jquery click handler on it and change its color

<script>
    $(function(){
         var colors = ['red','green','blue','pink','yellow','gray','white'];
         var len = colors.length;
         var counter = 0;
         $('.changeColor').click(function(){
             $(this).css('background-color', colors[counter]);
             counter++;
             //reset counter
             if(counter==len)
               counter = 0;
         });
    });
</scrip>