Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Change button color on click

Avatar

Level 2

Is there a way I can change a button color when the user clicks it? I want the button to start white then change to red when the user clicks it.

1 Accepted Solution

Avatar

Correct answer by
Former Community Member

Add this code to the click event:

this.border.fill.color.value

= "255,0,0"

Paul

View solution in original post

4 Replies

Avatar

Correct answer by
Former Community Member

Add this code to the click event:

this.border.fill.color.value

= "255,0,0"

Paul

Avatar

Level 2

Hi Paul,

Thank you for this information. It works great! Is there any way that I can set it to toggle on and off? So it can go red, then neutral, then red... or even better, is there a way to make it toggle between several colors (example: neutral, red, green, yellow)?

Thanks a bunch!

Avatar

Former Community Member

Try this:

if

(this.border.fill.color.value == "255,0,0"){

        this.border.fill.color.value

= "255,255,255"

}

else {

     this.border.fill.color.value

= "255,0,0"

}

Paul

The following has evaluated to null or missing: ==> liqladmin("SELECT id, value FROM metrics WHERE id = 'net_accepted_solutions' and user.id = '${acceptedAnswer.author.id}'").data.items [in template "analytics-container" at line 83, column 41] ---- Tip: It's the step after the last dot that caused this error, not those before it. ---- Tip: If the failing expression is known to be legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: #assign answerAuthorNetSolutions = li... [in template "analytics-container" at line 83, column 5] ----