//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.getElementById('inputID').value;
            
            //PROCESS: see if they typed in cereal!
            if ( inputFood == 'cereal' ) { 
                //OUTPUT: pop up a joyful message
                alert('This is the best thing EVER!');

            } else { // if anything else was typed in
                //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.getElementById('buttonID').onclick = amIHappy;
        document.getElementById('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="inputSizeID" 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.getElementById('inputSizeID').value;
            
            //PROCESS: see what they typed in...
            if ( size == 'small' ) { // if size small
                //OUTPUT: pop up the grapey news
                alert('Oh - we only have that in purple!');

            } else if ( size == 'medium'){ // if size medium
                //OUTPUT: pop up an expensive message
                alert('We have it for just $400!');
                
            } else if ( size == 'large'){ // if size large
                //OUTPUT: pop up a awkward message
                alert('We only have that size in a leopard print onesy.');
                        
            } else { // if not a size...
                //OUTPUT: show more instructions
                document.getElementById('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 inputSizeID is changed
        document.getElementById('inputSizeID').onchange = checkInventory;
        document.getElementById('buttonID').onclick     = checkInventory;
    </script>
</body>

Common mistakes

Learn more