Four Square Random Color

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
    #color-1{
        width: 100px;
        height: 100px;
        position:absolute;
        border-style: solid;
        border-width: 2px;
        border-color: lightslategray;
    }

    #color-2{
        width: 100px;
        height: 100px;
        position: absolute;
        left:110px;
        border-style: solid;
        border-width: 2px;
        border-color: lightslategray;
    }

    #color-3{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 110px;
        border-style: solid;
        border-width: 2px;
        border-color: lightslategray;

    }

    #color-4{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 110px;
        left: 110px;
        border-style: solid;
        border-width: 2px;
        border-color: lightslategray;
    }

    #rand-btn{
        position: absolute;
        left: 50px;
        top: 220px;
    }

    body{
        position: absolute;
        left: 43%;
    }

    #color-text{
        position: absolute;
        top: 300px;
        font-size: 48px;
        font-style:italic;
        font-weight: bolder;
    }
</style>
</head>

<body>
    <div id = "color-1"></div>
    <div id = "color-2"></div>
    <div id = "color-3"></div>
    <div id = "color-4"></div>
    <div id = "color-text"> </div>

    <input type = "button" value = "Randomize Colors" id = "rand-btn" onclick="changeFourColors()"/>

    <script>
        var colorOneArea = document.getElementById("color-1");
        var colorTwoArea = document.getElementById("color-2");
        var colorThreeArea = document.getElementById("color-3");
        var colorFourArea = document.getElementById("color-4");
        var colorTextArea = document.getElementById("color-text");

        randColors = function(divToChange){
            var colorValues = "0123456789ABCDEF";
            var colorCode = "#";
            for(var i = 0; i < 6; i++){
                colorCode += colorValues.charAt(Math.round(Math.random() * 15));
            }

            colorTextArea.innerHTML += colorCode + "<br/>";

            divToChange.style.backgroundColor = colorCode;
        }

        changeFourColors = function(){
            colorTextArea.innerHTML = "";
            randColors(colorOneArea);
            randColors(colorTwoArea);
            randColors(colorThreeArea);
            randColors(colorFourArea);
        }

        changeFourColors();

    </script>
</body>
</html>