The if and the else functions are 2 separate functions that are both opposite. These functions are automatically called by the$.var() function, but can also be called separately ($.if() &$.else()).

As the$.var() function, they both uses the "push" method. If you don't have any idea of how the push method works, just go see "The Basics" page.

So, as you can notice, the$.var() function is quite the same as the$.if() and$.else() functions. So, to use it, you'll need to put the tagif="condition" or the tagelse="condition" in the element to make it work properly 😊.

Let's say that if you wrote something special in an input field, something that was hidden shows up on the screen and that the input disappear.

HTML:

<!-- If the variable isTrue is equal to true, show the h1. We could also write isTrue == true --><h1if="isTrue">Hello World</h1><!-- If the variable isTrue is not equal to true, then show the input. We could also write isTrue == true because it's an else statement. --><inputelse="isTrue"type="text"placeholder="Type 'Hello World'"target="inputVal">

JS:

// Create the variable for DisplayJSvar$=newDisplayJS(window);// setting isTrue to false to show the input and hide the h1varisTrue=false;// checking the input using the target function$.target(function(){// rendering the var, because we use a custom callback$.var();if(inputVal=="Hello World"){isTrue=true;}});// checking the var to be sure every 100ms$.var(100)

Ok, 👌 so I hope you understood the importance of the if...else statement. They are quite similar to Vue.js "v-if", so if you are already working with Vue.js and you plan to switch to DisplayJS, you'll have less trouble learning these functions 😊.

Don't hesitate to ask your questions⁉️ in the issue part 😁