I am attempting to make some css change when using mobile but an unknown variable displays as undefined.

I have searched through numerous tutorials and found lots of different solutions but I am a beginner to javascript and html and don't entirely understand them. I am using chrome and changing the user agent to see what happens on mobile.

```
<!DOCTYPE html>
<html>
    <body>

        <p id="demo">Show</p>

        <div id="device"></div>
        <script type="text/javascript">

            var innerHTML="";

            testExp = new RegExp('Android|webOS|iPhone|iPad|' +
                               'BlackBerry|Windows Phone|'  +
                               'Opera Mini|IEMobile|Mobile' , 
                              'i');

              if (testExp.test(navigator.userAgent))
                   document.getElementById("device").innerHTML =
                        show();
              else
                   document.getElementById("device").innerHTML = 
                        hide();

            function show() {
              document.getElementById("demo").style.display = "none";
            }

            function hide() {
              document.getElementById("demo").style.visibility = "visible";
            }

        </script>

        <p>End</p>

    </body>
</html>

```

On desktop it should show:

```
Show
End

```

But it displays:

```
Show
undefined
End

```

On mobile the 'show' disappeared. But undefined does not.