HTML5: detecting if internet connection is available

Stephen · **Posted:** April 1st, 2019, 12:27 pm

Trying to put 2 textboxes on the first (sign-in) page of an HTML5 lesson that will show whether an internet connection is available or not.

Found JS that will create an alert (see below), but not sure how to adapt this to show/hide 2 textboxes, one saying internet connection available, another second box saying no internet connection is available.

Can create 2 textboxes (for example, T1 and T2), but not sure how to identify them in the JS (see below) and then hide or show them (toggle between?) based on whether the connection is detected or not.

Any help appreciated.

Code:

<script>
    function status()
    {
        if(navigator.onLine)
        {
            alert("Browser is online");
        }
        else
        {
            alert("Browser is offline");
        }
    }
</script>

Thank you for your help.

mackavi · **Posted:** April 1st, 2019, 1:14 pm

Opus doesn't understand JavaScript in the editor: Put window in front of it.

Code:

if (window.navigator.onLine){

myStatus = "You are online";
} else {
myStatus = "You are offline"
}

</mack>

Stephen · **Posted:** April 1st, 2019, 2:02 pm

Thanks, Mack.

That works nicely!

Digital Workshop

HTML5: detecting if internet connection is available

Who is online