0

How to do it through javascript?

  • I'm a newbie. Help. – medvedvoha Jan 27 '15 at 20:11
  • 1
    can you add more details to your question ? is it a button on a Visual force page or a standard button / custom button on a standard page layout ? – Vamsi Krishna Jan 27 '15 at 23:18
1

Just for your information it is a good idea to include more detail when asking a question, e.g. you could include some of your source code, any solutions that you have already tried.

I am going to make an assumption that you have an <apex:commandButton>, and that you wish to add a javascript click event handler to the button that can change the color of the button:

<script type="text/javascript">
     function changeColor(elementId, newColor) {
        var element = document.getElementById(elementId);
        element.style.background = newColor;
     }
</script>

. . . 

<apex:commandButton id="btn1" 
                    value="Button 1" 
                    onclick="changeColor('{!$Component.btn1}', 'red'); changeColor('{!$Component.btn2}', 'white');" 
                    rerender="container"/>

<apex:commandButton id="btn2" 
                    value="Button 2" 
                    onclick="changeColor('{!$Component.btn1}', 'white'); changeColor('{!$Component.btn2}', 'red');" 
                    rerender="container"/>

<apex:outputPanel id="container">
</apex:outputPanel>
  • That's almost what I need, but when you click page is loaded and returns the old color. How to get rid of it? – medvedvoha Jan 27 '15 at 20:43
  • If you need the button to also call an action on your controller, then using a rerender attribute should do the trick as long as the component that you rerender doesn't contain the button itself. If you don't need to call an action on the controller you can just use a standard HTML button. I will updated the code above to demonstrate. – luke.mcfarlane Jan 27 '15 at 21:35
  • Thank you. Another question: how to when clicked on the button, and another button to change color? example: if (click button1) { button1.color="red"; button1.color="blue";} – medvedvoha Jan 27 '15 at 22:22
  • Sorry but you will need to reword your sentence/question as it doesn't make sense. – luke.mcfarlane Jan 27 '15 at 22:57
  • I know English badly. For example: there are two buttons. if( Click button_1) { button_1.background='red'; button_2.background='white'; } else if( Click button_2) { button_1.background='white'; button_2.background='red'; } How to make such? – medvedvoha Jan 27 '15 at 23:21
0

How to make: If click "Manager" then Manager.backcolor='red' and Employee.backcolor='white'. Else If click "Employee" then Manager.backcolor='white' and Employee.backcolor='red' ? Code:

      <script>
    function styleButton_Manager(btnEl)
    {    
       var newHexColorStr = 'red';       
       btnEl.style.background = newHexColorStr;   
    }
    function styleButton_Employee(btnEl)
    {    
       var newHexColorStr = '#0000FF'; // blue
       btnEl.style.background = newHexColorStr;
    }
    </script>
    ......................................
 <apex:commandButton rendered="{!manager_mode}" onclick="styleButton_Manager(this)" action="{!toManager}" value="Manager" reRender="container"/>&nbsp;
    <apex:commandButton rendered="{!employee_mode}" onclick="styleButton_Employee(this)" action="{!toEmployee}"  value="Employee" reRender="container"/>
..................................
 <apex:outputPanel id="container">
 ................................
 </apex:outputPanel>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.