How to change button color on its click

How to change button color on its click

  

Hi

I want to change color of a button on its click to some other color

Hi Narendra,

You should use either jquery or javascript to change the color of your button onclick.


Using CSS only it's not achievable.


Regards,

Pankaj 


Hi Pankaj 

Thanks for the reply but how should I do it with Javascript

I have 4 buttons all of the white color and I want to change the color of the clicked button to orange and change the color of a previously selected button to white color

Hi Narendra,

add the following code in the Javascipt in the screen and pass the appropriate buttonId should be able to acheive the requirement.


onclick => myFunction();

function myFunction() {

document.getElementById('#"+buttonId+"').style.color = "red";

}

Thanks

Hello Narendra,

I would say that when you click a button, you are doing something, like calling an action, right?
If this is true, you would be better (in terms of maintenance of the application, at least), not relying on JavaScript.

You can associate to the button a conditional class, that defines, through CSS, its color. Than, when you click and call the action, you just change the condition and ajax refresh the buttons.

To apply conditional class to an element (in web), you can use the Extended Properties of the element, like this:

class
= IF(yourconditionhere, "Clicked", "NotClicked")

Where Clicked and NotClicked would be classes you define setting the style to apply and yourconditionhere is a condition that would say if the button was clicked or not (like a boolean variable).

Cheers.

Eduardo Jauch wrote:

Hello Narendra,

I would say that when you click a button, you are doing something, like calling an action, right?
If this is true, you would be better (in terms of maintenance of the application, at least), not relying on JavaScript.

You can associate to the button a conditional class, that defines, through CSS, its color. Than, when you click and call the action, you just change the condition and ajax refresh the buttons.

To apply conditional class to an element (in web), you can use the Extended Properties of the element, like this:

class
= IF(yourconditionhere, "Clicked", "NotClicked")

Where Clicked and NotClicked would be classes you define setting the style to apply and yourconditionhere is a condition that would say if the button was clicked or not (like a boolean variable).

Cheers.


Thanks for the reply, but how could I do it for mobile

Almost the same way. The difference is that instead of Extended Properties you set the class & condition in the Attributes section, and that you don't need to refresh the buttons. If the variable holding the value of which button is active is used in the condition changes, the class in the button will change also.

Eduardo Jauch wrote:

Hello Narendra,

I would say that when you click a button, you are doing something, like calling an action, right?
If this is true, you would be better (in terms of maintenance of the application, at least), not relying on JavaScript.

You can associate to the button a conditional class, that defines, through CSS, its color. Than, when you click and call the action, you just change the condition and ajax refresh the buttons.

To apply conditional class to an element (in web), you can use the Extended Properties of the element, like this:

class
= IF(yourconditionhere, "Clicked", "NotClicked")

Where Clicked and NotClicked would be classes you define setting the style to apply and yourconditionhere is a condition that would say if the button was clicked or not (like a boolean variable).

Cheers.

Two questions:

1.)What is the condition here?I have created two classes (ButtonTalkingPoints and ButtonTalkingPointsActive)

and on click I want to change the class style from ButtonTalkingPoints to ButtonTalkingPointsActive.When I am writing isclicked in if condition ,there is error.

2.)I want to use a icon from entitties.icon in label of button.How to achieve that?

Foreg: My talking points +icon

Please be elaborate.



Please, elaborate your question. For example, show the IF condition you are putting in the class extended attribute. Which variable are you using to tell if the button is clicked or not, etc.

Eduardo Jauch wrote:

Please, elaborate your question. For example, show the IF condition you are putting in the class extended attribute. Which variable are you using to tell if the button is clicked or not, etc.

I don't know which condition to put.I have not entered any condition.It's just a name().What I have done is that I have placed a button and just designed two css classes for two states of button i.e. active and inactive.



Hello Naredra,

For multiple buttons, to change the current clicked button color use the jquery.
Use the same class for all buttons. I used the class "buttonClass". When you click on the button append the class colorChangeClass.

Use the below jquery. Use your classes.

// CSS 

.colorChangeClass{

color: red;

}


$(document).ready(function(){

$(".buttonClass").removeClass("colorChangeClass");


$(".buttonClass").click(function(){

  $(".buttonClass").removeClass("colorChangeClass");

  $(this).addClass("colorChangeClass");

});

});

Suhas Jamdade wrote:

Hello Naredra,

For multiple buttons, to change the current clicked button color use the jquery.
Use the same class for all buttons. I used the class "buttonClass". When you click on the button append the class colorChangeClass.

Use the below jquery. Use your classes.

// CSS 

.colorChangeClass{

color: red;

}


$(document).ready(function(){

$(".buttonClass").removeClass("colorChangeClass");


$(".buttonClass").click(function(){

  $(".buttonClass").removeClass("colorChangeClass");

  $(this).addClass("colorChangeClass");

});

});

Don't do that.
If you are clicking a button, and calling an Action (and will stay in the page), use the "OutSystems way".

The less you use JavaScript, the better.

Cheers.


Shubham Agarwal wrote:

Eduardo Jauch wrote:

Please, elaborate your question. For example, show the IF condition you are putting in the class extended attribute. Which variable are you using to tell if the button is clicked or not, etc.

I don't know which condition to put.I have not entered any condition.It's just a name().What I have done is that I have placed a button and just designed two css classes for two states of button i.e. active and inactive.



You need a variable to hold which button is clicked and when you click a button, in the action you call, you assign a value to this variable to tell this button clicked it. In the class extended property of each button you just check if the button clicked was this one and if so, apply one class or another, if not.

The syntax is in my answer above.

Cheers.

Narendra Kothamire wrote:

Hi Pankaj 

Thanks for the reply but how should I do it with Javascript

I have 4 buttons all of the white color and I want to change the color of the clicked button to orange and change the color of a previously selected button to white color

Hi Narendra,

On Click of button Add a Screen Action with Ajax Refresh and add a Run Java Script Action from HTTPRequestHandler.

The Javascript is as below:

SyntaxEditor Code Snippet

"document.getElementById('"+Id-of-button-1+"').style.backgroundColor='#004a80';//Changes BG to Blue
document.getElementById('"+Id-of-button-1+"').style.color='white'; //Changes Text to White
document.getElementById('"+Id-of-button-2+"').style.color='#004a80'; //Changes Text to Blue
document.getElementById('"+Id-of-button-2+"').style.backgroundColor='white';//Changes BG - White
document.getElementById('"+Id-of-button-3+"').style.color='#004a80';
document.getElementById('"+Id-of-button-3+"').style.backgroundColor='white';
document.getElementById('"+Id-of-button-4+"').style.color='#004a80';
document.getElementById('"+Id-of-button-4+"').style.color='white';

You will have to repeat this script on all button clicks with tweaks in color.


Regards,

Rushabh Shah

Eduardo Jauch wrote:

Shubham Agarwal wrote:

Eduardo Jauch wrote:

Please, elaborate your question. For example, show the IF condition you are putting in the class extended attribute. Which variable are you using to tell if the button is clicked or not, etc.

I don't know which condition to put.I have not entered any condition.It's just a name().What I have done is that I have placed a button and just designed two css classes for two states of button i.e. active and inactive.



You need a variable to hold which button is clicked and when you click a button, in the action you call, you assign a value to this variable to tell this button clicked it. In the class extended property of each button you just check if the button clicked was this one and if so, apply one class or another, if not.

The syntax is in my answer above.

Cheers.


There is only 1 button and on clicking that I want to change its color.

Narendra Kothamire wrote:

Hi Pankaj 

Thanks for the reply but how should I do it with Javascript

I have 4 buttons all of the white color and I want to change the color of the clicked button to orange and change the color of a previously selected button to white color


If you have 4 buttons, Use 4 variable whos data type is boolean. By default value is false for all variables.
1) When you click on button set variable true for that button. and remaining variable values to false.
2) When you click on onother button set true for that button and remaining set to false.

for button 1 use variable IsBtn1Active
for button 2 use variable IsBtn2Active

for button 3 use variable IsBtn3Active

for button 4 use variable IsBtn4Active

In extended property of all buttons
use

class

= IF(IsBtn1Active,"active","")


and for active class set the css.