JavaScript: Fill Content onClick

by MythOfEchelon

HTML

<!DOCTYPE html> <!-- This is just my basic HTML5 template. Make sure you set this up correctly for your personal needs -->

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            div {
                float: left;
                text-align: center;
                cursor: pointer;
            }
            
            .option {
                width: 100%;
                border: 2px solid red;
            }
            
            #wrapper {
                height: auto;
                width: auto;
            }
            
            #col1 {
                width: 100px;
            }
            
            #col2 {
                height: 68px;
                line-height: 4.25; /*Align text to the center vertically*/
                width: 200px;
                border: 2px solid blue;
            }
        </style>
        
        <script type="text/javascript">
            function outputText(id){
                var outputElement = document.getElementById("col2");
                
                if (id == "option1"){
                     outputElement.innerText = "Option 1 was selected"; /*Customise text that will appear in these sections*/
                } else if (id == "option2") {
                     outputElement.innerText = "Option 2 was selected";
                } else if (id == "option3") {
                     outputElement.innerText = "Option 3 was selected";
                } else if (id == "col2") {
                     outputElement.innerText = "";
                }
            }
        </script>
    </head>
    
    <body>
        <div id="wrapper">
            <div id="col1">
                <div id="option1" class="option" onClick="outputText(this.id)">
                    <span>Option #1</span>
               ...