how check internet connection and display in label in html?

Question

I had code with me to check internet connection and also display the online/offline status in label in the time of html page load. but it is not working properly. so please help me to solve the problem.here is the script to check the internet connection.

<script type="text/javascript">

    function checkconnection() {

        var status = navigator.onLine;

        if (status) {

            document.getElementById("LblText").value = "ONLINE";

        } else {

            document.getElementById("LblText").value = "OFFLINE";
        }
    }

</script>

I am also attaching label syntax below

<label id="LblText">NO Text</label>

I want to show label text online /offline according to internet connection availability.

Possible duplicate of [Check if Internet Connection Exists with Javascript?](http://stackoverflow.com/questions/2384167/check-if-internet-connection-exists-with-javascript) — Iceman, Jul 16 '16 at 05:27
Possible duplicate of [Detect that the Internet connection is offline?](http://stackoverflow.com/questions/189430/detect-that-the-internet-connection-is-offline) — Vidur, Jul 16 '16 at 05:30

score 2 · Answer 1 · edited Mar 15 '18 at 04:19

Try this one, This will auto detect offline and online status of internet connection. You can register listeners for these events by following below steps :

Using addEventListener on the window, document, or document.body.
By setting the online or offline properties on document or document.body to a JavaScript Function object.

<html>
    <head>
        <script>
            function updateOnlineStatus() {
                document.getElementById("status").innerHTML = "User is online";
            }

            function updateOfflineStatus() {
                document.getElementById("status").innerHTML = "User is offline";
            }

            window.addEventListener('online', updateOnlineStatus);
            window.addEventListener('offline', updateOfflineStatus); 
 
        </script> 
    </head>
    <body>
        <div id="status">User is online</div>
    </body>
</html>

score 1 · Answer 2 · answered Jul 16 '16 at 05:55

1

Are you calling the checkconnection() function anywhere? Your logic exists, but doesn't run because you haven't called the function.

Also, try using .innerHTML or .innerText instead of .value, unless you are trying to change an input field.

<label id="LblText"></label>
<script>
    function checkConnection() {
        if(navigator.onLine) {
          status = 'Online';
        } else {
          status = 'Offline';
        }
        document.getElementById('LblText').innerText = status;
    }

    checkConnection();
</script>

answered Jul 16 '16 at 05:55

Matt Barry

91
4

this code is working but it always show online wherever there is connection is not available or available. this is already mentioned above by iceman in link – Nidhin Johny Jul 16 '16 at 06:06
So it sounds like you want something more complicated than "is my Wifi connected". You could use something like https://github.com/alfg/ping.js and handle ping timeouts. – Matt Barry Jul 16 '16 at 06:14

score 0 · Answer 3 · answered Jul 16 '16 at 05:39

<html>
<head>
    <title>Check Connection</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #mainContainer {
            border: 4px #007CA6 solid;
            background-color: #D2F4FF;
            width: 450px;
            height: 300px;
            text-align: center;
        }
        #mainContainer a {
            background-image: url("//www.kirupa.com/images/giant_cloud.png");
            background-position: center 70px;
            background-repeat: no-repeat;
            color: #00BFFF;
            display: block;
            font-family: Arial,Helvetica,sans-serif;
            font-size: 32px;
            padding-top: 200px;
            text-decoration: none;
        }
        #mainContainer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>

<div id="mainContainer">    
    <a href="javascript:void(0)">Check connection!</a>
</div>

<script>

    var link = document.querySelector("#mainContainer a");
    link.addEventListener("mousedown", checkConnection, false);

    function checkConnection(e) {
        if (doesConnectionExist() == true) {
            alert("connection exists!");
        } else {
            alert("connection doesn't exist!");
        }
    }

    function doesConnectionExist() {
        var xhr = new XMLHttpRequest();
        var file = "//www.kirupa.com/blank.png";
        var randomNum = Math.round(Math.random() * 10000);

        xhr.open('HEAD', file + "?rand=" + randomNum, false);

        try {
            xhr.send();

            if (xhr.status >= 200 && xhr.status < 304) {
                return true;
            } else {
                return false;
            }
        } catch (e) {
            return false;
        }
    }
</script>
</body>
</html>

Jayadeep i check this code by running .when i have internet it show. connection doesn't exist! and also when i dint have internet it shows same . — Nidhin Johny, Jul 16 '16 at 05:53

how check internet connection and display in label in html?

3 Answers3