How it works?

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.

How to use it?

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 tag if="condition" or the tag else="condition" in the element to make it work properly 😊.

Examples

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 -->
<h1 if="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. -->
<input else="isTrue" type="text" placeholder="Type 'Hello World'" target="inputVal">

JS:

// Create the variable for DisplayJS
var $ = new DisplayJS(window);
// setting isTrue to false to show the input and hide the h1
var isTrue = 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 😊.

⚠️ Questions?

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