//PROCESS: if...else conditionals

<New code>

//PROCESS: if ( something1 == something2 ) { ..do something .. }
— does something if two things are equal

//PROCESS: if ( something1 == something2 ) { ..do something .. } else { ..do something else.. }
— as above, but does something else if two things are not equal

//PROCESS: if ( something1 == something2 ) { ..do something .. } else if ( something1 == something3 ) { ..do something else.. } else { ..do something else.. }
— as above, but allows additional choices

A fork in the road

Sometimes you need a program to do different things for different circumstances.

These are called conditionals — code runs differently depending on the conditions.

In almost every language, this can be done with if statements.

If statements look like this:

if (something == true) {
	/* do something */
} else {
	/* do something else */
}

Basic example: Cereal makes me happy!

Let's say I want to make a program to celebrate the magic of eating cereal:

What will you feed me? Hint: I really love cereal!

...is made from:

<body>
    <h4>What will you feed me? Hint: I really love cereal!</h4>
    <p>
        <input id="inputId" type="text" />
        <button id="buttonId">Feed me!</button>
    </p>

    <script>
        // This checks to see if I am happy based on what was entered
        var amIHappy = function () {
            //INPUT: read what was typed in
            var inputFood   = document.querySelector( '#inputId' ).value;
            
            //IF: they typed in the string "cereal"
            if ( inputFood == 'cereal' ) { 
                //OUTPUT: pop up a joyful message
                alert( 'This is the best thing EVER!' );

            //ELSE: anything else was typed in
            } else { 
                //OUTPUT: pop up a woeful message
                alert( 'This is the WORST thing ever!' );
            }
        }
        
        //INPUT: trigger amIHappy when #buttonId is clicked 
        //  or when #inputId is changed
        document.querySelector( '#buttonId' ).onclick   = amIHappy;
        document.querySelector( '#inputId' ).onchange   = amIHappy;
    </script>
</body>

More than two options? Use if... else if chains

If there are more than two options, then you use if... else if, like this:

Welcome to the world's worst clothing store!

What size do you take: small, medium, or large?

...is made from the following code:

<body>
    <h4>Welcome to the world's worst clothing store!</h4>
    <p id="instructionsId">
        What size do you take: small, medium, or large? 
    </p>
    <p>
        <input id="inputId" type="text">
        <button id="buttonId">Check inventory</button>
    </p>

    <script>
        // Read what was typed and pop up an alert according to the size
        var checkInventory = function () {
            //INPUT: read what was typed in
            var size    = document.querySelector( '#inputId' ).value;
            
            //IF: they typed in the string "small"
            if ( size == 'small' ) {
                //OUTPUT: pop up the grapey news
                alert('Oh - we only have that in purple!');
                
            //IF: they typed in the string "medium"
            } else if ( size == 'medium'){
                //OUTPUT: pop up an expensive message
                alert('We have it for just $400!');
                
            //IF: they typed in the string "large"              
            } else if ( size == 'large'){
                //OUTPUT: pop up a awkward message
                alert('We only have that size in a leopard print onesy.');
                        
            //ELSE: they haven't typed in a valid size
            } else {
                //OUTPUT: show more instructions
                document.querySelector( '#instructionsId' ).innerHTML
                    = "Hmmm. I don't know what "
                    + size
                    + " is. Try again! 'small', 'medium', or 'large'?";
            }
        }
        
        //INPUT: trigger checkInventory whenever #buttonId is pressed
        //  or when #inputId is changed
        document.querySelector( '#inputId' ).onchange   = checkInventory;
        document.querySelector( '#buttonId' ).onclick   = checkInventory;
    </script>
</body>

Common mistakes

Learn more