Untitled

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery-3.2.1.js" ></script>
    <style>
        #választás {
            background-color: saddlebrown;
            color: #F5F5DC;
            width:20%;
            padding:10px;
        }
    </style>
</head>
<body >
    <div id="választás">
        Válassza ki milyen színnel szeretne játszani
        <br />
        <input type='button' name='gomb' value='fehér' id='fehér' onclick="feher()"/>
        <input type='button' name='gomb' value='fekete' id='fekete' onclick="fekete()" />
    </div>
    <div id="hova">


    </div>
    <script>

        var objs = {
            magassag: "75px",
            szelesseg: "75px",
            szín: "saddlebrown",
            repülés: "left",
            margó: "-4px",
            keret: "1px solid black",
            kép: function () {
                return "<img src='FEHÉR.png'>";
            },
            generalas: function () {
                return "<div style='height:" + this.magassag + ";margin-top:" + this.margó + ";border:" + this.keret +"; width:" + this.szelesseg + "; background-color:" + this.szín + ";display:inline-block;' ></div>";
            }

        }
        var obj = {
            magassag: "75px",
            szelesseg: "75px",
            szín: "#F5F5DC",
            repülés: "left",
            margó: "-4px",
            keret: "1px solid black",
            generalas: function () {
                return "<div style='height:" + this.magassag + ";margin-top:" + this.margó + " ;border:"+this.keret+";width:" + this.szelesseg + "; background-color:" + this.szín + ";display:inline-block;' ></div>";
            }
        }
        function felhelyezes() {
            for (var i = 1; i < 5; i++) {
                for (var j = 1; j < 5; j++) {
                    if (i%2==0) {
                        $("#hova").append(obj.generalas());
                        $("#hova").append(objs.generalas());
                    }
                    else {
                        $("#hova").append(obj.generalas());
                        $("#hova").append(objs.generalas());
                    }
                }
                $("#hova").append("<br/>");
                for (var k = 1; k < 5; k++) {

                    $("#hova").append(objs.generalas());
                    $("#hova").append(obj.generalas());
                }
                $("#hova").append("<br/>");
            }
        }
        function feher() {
            felhelyezes();
            $("#választás").hide();
        }
        function fekete() {
            felhelyezes();
            $("#választás").hide();
        }
    </script>
</body>
</html>