On-click Styling

[Electroguard]

This is not really an Annex bug Francesco, but I suspect there may be a problem in the Annex javascript.
I had a couple of very useful old javascript snippets from you way back in the early days.
One sets ID='identifier' on web items so that they can be styled by Annex using CSSID$("identifier",
The other sets onclick='cmdButton(this)' to branch to the subdir specified by data-var='subdir'
Both work great by themselves.
I could create an alternatively styled LED which could be toggled by a button.
OR Annex could branch by clicking on that LED.
BUT (big BUT) they don't work together, cos the on-click facility breaks style capability.
The problem has been there for ages, so is not a recent introduction, and is the same for Annex and Annex32. Is not the end of the world, but would be nice to click an led to toggle its relay, or click on a textbox to get new info, rather than needing to include buttons for them.

It's not easy to explain in words, but is demonstrated in the snippet below - the button shows the mylamp styling is working and toggling the mylamp variable. But if the on-click line is uncommented, it then prevents any styling even though on-click does branch and toggles the mylamp variable.
Hopefully the problem may quickly jump out when looked for, and might be something to do with LED code seeing as how the ID items styling colour is being over-ridden to green.

Code: [Local Link Removed for Guests]

'onclick styling snippet
mylamp = 0
cls
autorefresh 1000
a$=     "<svg height='20' width='30'><circle cx='15' cy='12' r='8' stroke='black' fill='darkgray' id='mylamp'"
'a$=a$ + "data-var='toggle' onclick='cmdButton(this)'"  'this does branch ok, but screws up ID=
a$=a$ + " /></svg>" 
a$=a$ + CSSID$("mylamp", "fill: cyan;") 
a$=a$ + "<br><br><br>"
a$=a$ + textbox$(mylamp)
a$=a$ + "<br><br><br>"
a$=a$ + button$("toggle",toggle)
html a$
wait

toggle:
mylamp = 1 - mylamp
if mylamp = 1 then css CSSID$("mylamp", "fill: yellow;") else css CSSID$("mylamp", "fill: blue;")
return

End

[cicciocb]

There is no bug into Annex, this problem is simply caused because, as soon as you define "data-var=toggle" "toggle'" is both used for the place where to jump and also for the variable name associated with the led; because you are using autorefresh, the colors are automatically set to green and red and cannot be changed.
You can cheat simply using a variable with the same name of the jumping label.

example:

Code: [Local Link Removed for Guests]

'onclick styling snippet
mylamp = 0
toggle = 0
cls
autorefresh 100
a$=     "<svg height='20' width='30'><circle cx='15' cy='12' r='8' stroke='black' fill='darkgray' id='mylamp'"
a$=a$ + "data-var='toggle' onclick='cmdButton(this)'"  'this does branch ok, but screws up ID=
a$=a$ + " /></svg>" 
a$=a$ + CSSID$("mylamp", "fill: cyan;") 
a$=a$ + "<br><br><br>"
a$=a$ + textbox$(mylamp)
a$=a$ + "<br><br><br>"
a$=a$ + button$("toggle",toggle)
html a$
wait

toggle:
mylamp = 1 - mylamp
toggle = mylamp
'if mylamp = 1 then css CSSID$("mylamp", "fill: yellow;") else css CSSID$("mylamp", "fill: blue;")
return

that can be simplified like this :

Code: [Local Link Removed for Guests]

'onclick styling snippet
mylamp = 0
toggle = 0
cls
autorefresh 100
a$=     "<svg height='20' width='30'><circle cx='15' cy='12' r='8' stroke='black' fill='darkgray' "
a$=a$ + "data-var='mylamp' onclick='cmdButton(this)'" 
a$=a$ + " /></svg>" 

a$=a$ + textbox$(mylamp)
a$=a$ + "<br><br><br>"
a$=a$ + button$("toggle",mylamp)
html a$
wait

mylamp:
mylamp = 1 - mylamp
return

consider that, using a .css file, there are also infinite possibilities for the configuration but, unfortunately, it risks to be too complicate.

[Electroguard]

Ok, thanks for looking... but was only using the button branching toggle to demonstrate things, and by calling it "mylamp" there was no reference to LED.
The whole point was to avoid using branching buttons in favour of on-click items.

In fact I first noticed the problem when avoiding buttons by defining 4 onclick LEDs for a Sonoff 4 Channel relay module.
The LEDs could be styled ok by incoming UDP toggle instructions, but not after being clicked on ... the on-click branching worked ok and toggled the relay, but the LED colour never changed cos the styling by ID no longer worked.
Is not a big problem cos can use buttons, I just thought you may be intrigued why a stylable item can no longer be styled after being on-clicked.

[cicciocb]

Robin, there are no bugs, it is simple because there is only one property "data-var" that is used for both the jump label and the variable name.

The led has been designed to be a led and not a button

Luckily, the css has a beautiful attribute named !important that enables to override the default value.

So, your example will work with this simple trick :

Code: [Local Link Removed for Guests]

'onclick styling snippet
mylamp = 0
cls
autorefresh 1000
a$=     "<svg height='20' width='30'><circle cx='15' cy='12' r='8' stroke='black' fill='darkgray' id='mylamp'"
a$=a$ + "data-var='toggle' onclick='cmdButton(this)'"  'this does branch ok, but screws up ID=
a$=a$ + " /></svg>" 
a$=a$ + CSSID$("mylamp", "fill: cyan;") 
a$=a$ + "<br><br><br>"
a$=a$ + textbox$(mylamp)
a$=a$ + "<br><br><br>"
a$=a$ + button$("toggle",toggle)
html a$
wait

toggle:
mylamp = 1 - mylamp
if mylamp = 1 then css CSSID$("mylamp", "fill: yellow !important;") else css CSSID$("mylamp", "fill: blue !important;")
return

[Electroguard]

Much appreciated Francesco, the Sonoff 4 Channel will be much improved by on-click.