JavaScript for Beginners #7 - If, Else If, Else

Key Takeaways

hello everybody and welcome back so in this video we're gonna be talking about if else if and else now these are ways to essentially check a condition before executing a certain block of code and this is very useful and what a lot of you guys have been asking about in the comments or that I've realized but like okay well what if I only want to run this piece of code if this is true or what if I want to do this and if this doesn't happen I do that well this is where we get into if else if and else which are extremely useful and kind of fundamental skills of the language so what I've done so far is I've actually just changed this example a little bit so what we have now is hello we have a text box and then we have a button that says click the reason I've done this is because what I want to do for this example is has it habet so the user can type something into this text box click click and based on what they type in we're actually gonna change the color of this field so we could change you know if they type in the word green this will change to green when they press the bug they type in blue this will change to blue when they press the button that's what I want to try to do so let's try to do that now the first thing we need to actually do this is an if statement so I'm gonna run through how an if statement works essentially the syntax for an if statement is you type the word if which is a keyword it'll highlight hopefully in this red color for you guys if you're in sub line then you have these brackets like this you put some kind of condition inside of these brackets and if this condition is true then whatever is inside of these curly braces will run if it's not true you're simply gonna skip over this entire if statement so everything that's inside of this block and go to the next line and just ignore it and not even bother doing it so for instance if I say if true well this will always run because obviously true is always true but you know that's a condition I can put that in here and that means essentially if I did console dot log something in here that would always run whereas if I put this to be false like that and then I was gonna console dot log this would never run because well this is false so let's actually give this a go and do something a little bit more advanced so in a real condition inside of here and then we'll try to do something so what I'm gonna do is actually grab the text that the user typed into my input box and just store that in a variable to start so I'm gonna save our text equals and in this case I guess it's document dot get oops element if I could type properly early in the morning for me here guys ID then we will do I and P which is the input box dot value okay so there we go that's gonna grab our text for us now what I'm simply gonna say is if text equals equals and I guess we'll say read will change the color of our header tag here to be read so to do that I'm gonna say document dot get element by ID p-- dot style dot value equals red and I guess our ID is gonna be heavy like that okay now the only issue is I need to put this inside of a function so that essentially whenever my button is pressed we can activate that function and see what the current text value is so to do that what I'm gonna say is function pressed like this then I'm gonna just close my bracket here and indent all this so there we go so I know it went kind of fast there but essentially what I've done is create a function called pressed this function will be clicked or you know activated when we press this button here then we will get whatever we've typed as a text field check if it's equal to read if it's read we will change the color otherwise we won't do anything so let's run this now it's save and refresh the page so here notice when I click click nothing's happening when I type hi you know nothing's happening but if I type red then it changes hmmm alright so I realized I've done style dog value rather than style dot color so that would probably be why that wasn't working per second what I tried it out so I need to change that to color let me show you again now so I think I showed if I type something like Hello obviously nothing's gonna happen but if I type red and click click after this has been refreshed then that will change to red and that is because we have this style dot color equals red and if tax is equal to red that will happen ok awesome but what if when I press the button and if they didn't type in red for example I want it to automatically change the color to black so maybe you know now if I start typing hi well it's still the color because it's not being changed back to the other color so how do I do that well this is where we can use something called an else now an else essentially as happens anytime this if statement doesn't happen so whenever you have an if/else block like this you know that either the if is gonna run or the else is gonna run and it's pretty easy to read it out you say if text equals red do this otherwise or else do whatever is inside the else block and that's as easy as Isis so I'm just gonna copy this line and change it so that this makes the color block like this and now let's run this and just show you how this works and that should hopefully help you so we have hello now let's type you know you obviously block we're not getting anything let's type red that changes to red and then if I type I don't know no we get it back to black so that is how this works if it's not red and then it changes color to block if it's red then it changes the color to red okay so what if we want to be able to change the color to red or blue and then anything else goes to black well how would I do that well this is where we use what's called an else if now this so far I hope makes sense again you just have if if this condition happens whatever's inside of here you do this otherwise you do this now the else if is kind of an extension on top of this and I'll talk about how it works in a second but let's get the syntax down first so essentially the elsif is kind of a combination between both the else and the if now this is essentially saying if this doesn't happen so if this if statement doesn't run we will check if the condition we put here is true if that's true we'll do whatever is inside of our brackets here otherwise we'll come down and we'll do what's below here so this actually means we can have multiple else ifs which we'll get into in a second let's do another example here where we make this say maybe green and then we'll just get the element ID and change it to the color green so let's tap this in like that and go green alright so again the way this we're operating here is we're gonna start by checking if the tax is equal to red if it is boom we go red we don't even bother reading the rest of this we don't need to do it okay if it's not red what we'll check if it's green if it's green we'll change the color to green awesome there we go we're done we don't even read the else if this is not true and this is not true so both above the else aren't true then we'll run the else and we'll change the color to black and that is pretty much how this works it's fairly straightforward so let's refresh let's type green there we go it goes green let's type red it goes red and let's type blue and obviously it goes to black now if I want to incorporate blue as well what I could do is simply make another else--if like this I think I need to actually do that yes that should work let's put another condition here say text equals equals equals that should actually just be three let's say blue and then what we can do is simply copy this and change the color to be blue and this should work for us now again this is gonna work because we can have as many else ifs as we want we can do you know if else if else if we don't even need to include this else if we don't want to I can get rid of that I can have just one else if the combination of these is fine just know that if you have an else if or if you have an Allison there needs to be the initial if to start that statement so let's look at this now and let's try this so let's refresh if I type blue we change to blue if I type red we go to red if I type green we go to green and if I type something random nothing happens because that else statement is no longer there and that is you know pretty much how that works now a lot of people get confused with this try to do some examples we'll do some more as we go through the different videos but just remember you start with your if statement if whatever happens here happens is true then this runs if it doesn't we'll check all of the else ifs if any of those are true we'll execute that and we'll stop looking for the rest of them otherwise we will do any else statement that is at the bottom and that else statement will happen no matter what so long as you know the ones above it were false now we can definitely have more than one if statement like there's different ways to do this for example right now I'm doing else ifs but what I could actually do is just make all these ifs and everything's actually gonna operate the same and the reason that's going to happen is because well you know in theory none of these conditions will be true at the same time right the tax can never be equal to green blue and red at the same time but the reason we might not want to do this in some instances is well like if it's red what's the point of checking if it's green right so in this case we have three if statements these are gonna happen and they're all gonna be checked every single in of these if statements every time we run this condition will be evaluated and we'll check if this needs to happen but the thing is if the statement is red like if we check the text and it's red what's the point of even bothering to check these other two if statements well that's what we put them in else and because we're saying well you know if it's red there's no chance that this condition will be true so there's no point in even trying to evaluate it right but you know we can do 3-up ifs like this I'll show you this works if i refresh and I go green that's fine and the way this is gonna work is you know we read this if statement we check it if it's true we do it then we read this if statement if it's true we do it like in theory we could make these true like I can make this statement true and now let me actually show you how this works if I type in let's say here so let's have a look at our code we have red true blue right so if I type red notice that we actually change to the color green now the reason that happened is because this is true right so this is always gonna run so we check this even though it actually changes this to red it gets changed to blue directly after but now watch what happens if I type blue well blue is actually run well why is that because this happens we change it to green and then we change it to blue afterwards so we get to see the blue so anyways that has been if else if and else I hope that makes sense as always if there's any questions leave them down below and with that being said if you guys enjoyed leave a like subscribe to the channel and I will see you guys in the next JavaScript tutorial