z3

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Задача 3</title>
    <style rel="stylesheet" type="text/css">
        input[type="number"] {width: 60px;}
    </style>
    <script type="text/javascript">

        function get(success) {
            var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
            request.open("GET", "avtomobili.json");

            request.onreadystatechange = function() {
                if(this.readyState === 4 && this.status === 200) {
                    var data = JSON.parse(this.responseText);
                    success(data);
                }
            }

            request.send();
        }

        document.addEventListener("DOMContentLoaded", function() {
            var carShow = document.getElementsByClassName("cars")[0],
                    cars = carShow.getElementsByTagName("p");

            get(function(data) {
                for(var i = 0; i < data.length; i++) {
                    carShow.innerHTML +=
                            "<p original-color='" + data[i].color + "'>" +
                            "<b>marka:</b> " + data[i].brand + " <b>model:</b> " + data[i].model + " <b>color</b> <input type='color' value='" + data[i].color + "'> <b>max brzina:</b> <input type='number' value='" + data[i].maxSpeed + "'>";
                    "</p>";
                }
            });

            function sort() {
                var elems = [];

                for(var i = 0; i < cars.length; i++)
                    elems.push(cars[i]);

                var sorted = elems.sort(function(a, b) {
                    var aValue = parseInt(a.querySelector("input[type='number']").value),
                            bValue = parseInt(b.querySelector("input[type='number']").value);

                    return aValue < bValue;
                });

                return sorted;
            }

            function updateValues() {
                for(var i = 0; i < cars.length; i++) {
                    var maxSpeed = cars[i].querySelector("input[type='number']");
                    maxSpeed.setAttribute("value", maxSpeed.value);
                }
            }

            document.getElementsByTagName("button")[0].addEventListener("click", function() {
                updateValues();

                var sorted = sort();
                carShow.innerHTML = "";
                for(var i = 0; i < sorted.length; i++) {
                    sorted[i].style.background = sorted[i].getAttribute("original-color");
                    carShow.innerHTML += sorted[i].outerHTML;
                }
            });
        });
    </script>
</head>
<body>
<div class="cars"></div>
<button>sortiraj</button>
</body>
</html>