Untitled

<!DOCTYPE html>
<html>
<head>
	<title>SWPR</title>
</head>
<body onload="ldx();">
<style type="text/css">
.responded {
    color:green;
}
.checking,.unchecked {
    color:#FF8C00;
}
.timeout {
    color:red;
}
</style>
<ul data-bind="foreach:servers">
    <li> <a href="#" data-bind="text:name,attr:{href: 'http://'+name}">tester</a> <span data-bind="text:status,css:status"></span>
    </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script>
function ping(ip, callback) {
    if (!this.inUse) {
        this.status = 'unchecked';
        this.inUse = true;
        this.callback = callback;
        this.ip = ip;
        var _that = this;
        this.img = new Image();
        this.img.onload = function () {
            _that.inUse = false;
            _that.callback('responded');
            wrt(ip);
        };
        this.img.onerror = function (e) {
            if (_that.inUse) {
                _that.inUse = false;
                _that.callback('responded', e);
                wrt(ip);
            }
        };
        this.start = new Date().getTime();
        this.img.src = "http://" + ip;
        this.timer = setTimeout(function () {
            if (_that.inUse) {
                _that.inUse = false;
                _that.callback('timeout');
            }
        }, 1500);
    }
}
var PingModel = function (servers) {
    var self = this;
    var myServers = [];
    ko.utils.arrayForEach(servers, function (location) {
        myServers.push({
            name: location,
            status: ko.observable('unchecked')
        });
    });
    self.servers = ko.observableArray(myServers);
    ko.utils.arrayForEach(self.servers(), function (s) {
        s.status('checking');
        new ping(s.name, function (status, e) {
            s.status(status);
        });
    });
};
var arr = ["localhost:8080"];
function wrt(string){
arr.push("http://"+string);
console.log(arr);
ldx();
}
function ldx() {
    const ip1 = Myraspberrypiserver1;
    const ip2 = Myraspberrypiserver2;
    const ip3 = Myraspberrypiserver3;
    const ip4 = Myraspberrypiserver4;<--these are all placeholders for the actual ip addrs
    const ip5 = Myraspberrypiserver5;
    var komodel = new PingModel([ip1,ip2,ip3,ip4,ip5]);
	ko.applyBindings(komodel);
}
</script>
</body>
</html>