When clicked, it changes the value to false , but not back.
I think the problem is in the type of the value, it is a string . How to remake on boolean ?
button { border: 0px; border-radius: 2px; outline: none; padding: 4px 8px; cursor: pointer; color: #FFF; transition: .5s; } button[value='true'] { background: #63AEEE; } button[value='false'] { background: #FF6040; } <button onclick='value = !value' value='true'>Toggle</button> 
since these are all really strings, compare with strings.
button { border: 0px; border-radius: 2px; outline: none; padding: 4px 8px; cursor: pointer; color: #FFF; transition: .5s; } button[value='true'] { background: #63AEEE; } button[value='false'] { background: #FF6040; } <button onclick='value = value == "false";' value='true'>Toggle</button> Attribute values are always a string, so when assigning a value to them, this value will be translated into a string.
How it works:
initially value - "true"
When comparing: "true"=="false" - we get the result false , which, when assigned to an attribute, is converted to the string "false"
The next time you press, the comparison is "false"=="false" - we get the result true , which when assigned to an attribute is converted to the string "true" .
As a result, returned to the original version.
v = v == "" and how does it work? - Mr. BlackSource: https://ru.stackoverflow.com/questions/545708/
All Articles