loading...

State Switching..!

mohsenfallahnjd profile image Mohsen Fallahnejad Updated on ・2 min read

Sometimes, when we are writing the logical commands of a part of the main program, we need to change the situation between the two types, if a specific condition happen.

For example, when we click the “ Edit ” button, we can edit the text and disable editing by pressing the “ Edit ” button again.

Or in a Todo list, when the ‘ check ’ is clicked, the task will switch to the DONE state and return to its original state when clicked again.

alt text
alt text

when the ‘ check ’ is clicked, the task will switch to the DONE state and return to its original state when clicked again.

In this type of change state, we can write the logic with the “ if ” and “ else ” commands. For example, in the first case, we can say “ If the editing button was clicked and it wasn’t on the “Edit” mode, the text becomes editable and if it was on the “Edit” mode when clicked, it would switch to the non-editing mode…. ”, that which includes long commands “ If ” and “ Else ”…


But the point is, in these cases, you can set true or false for it.
“….If the editing mode had a “false state”, the text box can’t be edited…”

alt text

By clicking on the button, it should switch to the true mode and be ready for editing…

The simplest way to opposite the default state is considering the “ ! “ phrase like this:

alt text

If you found it useful, you can follow me and also visit my website, because there are more ways to connect with me. I hope this would help you to improve your coding skills. Thank you for your attention.


This article was originally published on The Dev.to on March 16, 2020 and was written by Mohsen Fallahnejad.

Posted on Mar 16 by:

mohsenfallahnjd profile

Mohsen Fallahnejad

@mohsenfallahnjd

I like JavaScript codding in Front-end form and especially Vue.js

Discussion

markdown guide