how to use javascript in mobile app to change color of button on click

how to use javascript in mobile app to change color of button on click

  

Hi,
I'm currently developing a mobile app where i have 3 buttons in Bottom placeholder of screen.
Now i need to change the color of button on click.
I tried to use a screen action and inside it i defined a JavaScript to get element by its name and then use to change background color.
But its not working.
It says "cannot read property style of undefined"

PS: document.getElementsByName() returns array of elements so i have used document.getElementsByName()[0]   to get element and  each button has unique name.

So , how to solve it.

Or is there any better alternative to change buttons color on click ?

Screenshot attached of flow, screenaction and javascript code attached.

Thanks

Hi Anand,

Why not use an If expression on the style classes property to set the different class names, and define in the class name the color?m

This is an easier solution that does not require custom javascript code.

Regards,

Daniel

Daniël Kuhlmann wrote:

Hi Anand,

Why not use an If expression on the style classes property to set the different class names, and define in the class name the color?m

This is an easier solution that does not require custom javascript code.

Regards,

Daniel

Thanks for the response,
Your solution sounds simple and efficient but how do i manage on click event while using if ?
If condition should also trigger onclick to change color
Can you elaborate a bit how to implement your solution.


Thanks and regards,
Nitish

Anand Das wrote:

Daniël Kuhlmann wrote:

Hi Anand,

Why not use an If expression on the style classes property to set the different class names, and define in the class name the color?m

This is an easier solution that does not require custom javascript code.

Regards,

Daniel

Thanks for the response,
Your solution sounds simple and efficient but how do i manage on click event while using if ?
If condition should also trigger onclick to change color
Can you elaborate a bit how to implement your solution.


Thanks and regards,
Nitish

Make a local variable to hold the class name you want to apply on click. In the OnClick action set the value of the local variable to the proper class name. In the style class set the expression to the local variable.

That should do the job.



Hi Nitish,

In support to Daniel's comment, below screen shot describe the certain ways you can set the background color of button on click.

IsClicked = False (Screen Local Variable Default Value) - Value gets updated to True on Button Click


1) Assign CSS Style on conditional basis.

2) Assign CSS Class on conditional basis.

Note: To follow the best practises, use CSS classes.

3) Using JS (JQuery)

Button Widget Name: MagicBtn

4) Using JS


Hope this helps :)


Kind Regards,

Benjith Sam