How does js change the contents of div?

whatever color is clicked will be displayed in the DIV background, and then I am div will become the selected color text such as: select the text in the yellow div to change my background color to yellow

how on earth does this come true? I wrote a lot of way code can not achieve this, Baidu and Google above did not find the answer I want, there is a boss to help me answer? It just won"t set up and change the div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        -sharpdiv1 {
            width: 300px;
            height: 300px;
            border: 2px solid gray;
            margin: 100px 0 0 200px;
        }
    </style>
    <script type="text/javascript">
        // 
        window.onload=init;

        //
        function init() {
            // 
            var bgcolor=document.getElementById("bgcolor");
            var div1=document.getElementById("div1");
            // change
            bgcolor.onchange=function() {
                // 
            }
        }
    </script>
</head>
<body>
    <div>
        <span>:</span>
        <select id="bgcolor">
            <option value=""></option>
            <option value="yellow"></option>
            <option value="orange"></option>
            <option value="pink"></option>
            <option value="purple"></option>
        </select>
    </div>
    <div id="div1">div</div>
</body>
</html>

// window.onload = init; // function init() { // var bgcolor = document.getElementById("bgcolor"); var div1 = document.getElementById("div1"); // change bgcolor.onchange = function () { // var color = bgcolor.value; if(color){ div1.style.backgroundColor = color; div1.innerHTML = '' + color; } } }