Variable Variable Names In JavaScript - Demonstrated

<!DOCTYPE html>

<!--------------------------------------------------------------------------------------------------
  --------------------------------------------------------------------------------------------------
  [variable_var_names.html]
    How to declare (and manipulate) multiple variables, with variable names, as needed, with the
    added plus of indexing (and accessing) them in a way that standard arrays can't.

        (c) Damion 'Phr0z3n.dev' Tapper, 2014.
        Email: Phr0z3n.Dev@Gmail.com
  --------------------------------------------------------------------------------------------------
  --------------------------------------------------------------------------------------------------->

<html>
    <head>

        <title>
            Phr0z3n.Dev's Variable Variable Names
        </title>

        <style type="text/CSS">
            body{
                font-family: helvetica;
                font-size: 11pt;
            }

            #mainDiv{
                width: 350px;
                margin-left: auto;
                margin-right: auto;
            }
            div div[id$="Div"]{
                height: 150px;
                border: 1px dotted rgb(0, 0, 64);
                padding: 4px;
            }
            #firstDiv{
                background-color: rgb(224, 255, 255);
            }
            #secondDiv{
                background-color: rgb(255, 224, 255);
            }
            #thirdDiv{
                background-color: rgb(255, 255, 224);
            }
        </style>

        <script type="text/JavaScript" src="variable_var_names.js"></script>

    </head>
    <body>

            <div id="mainDiv">
                <!--FIRST DIV-->
                <div id="firstDiv">
                    <p>This is the first div.</p>
                    <p>Its contents can be cleared and restored using the button below.</p>
                </div>
                <button id="firstButton" OnClick="JavaScript: divClearRestore('first');">Clear</button><br /><br /><br />

                <!--SECOND DIV-->
                <div id="secondDiv">
                    <p>This is the second div.</p>
                    <p>Its contents can be cleared and restored using the button below.</p>
                </div>
                <button id="secondButton" OnClick="JavaScript: divClearRestore('second');">Clear</button><br /><br /><br />

                <!--THIRD DIV-->
                <div id="thirdDiv">
                    <p>This is the third div.</p>
                    <p>Its contents can be cleared and restored using the button below.</p>
                </div>
                <button id="thirdButton" OnClick="JavaScript: divClearRestore('third');">Clear</button>
            </div>

    </body>
</html>