Why won't this script set the style.display to "block"?

I was including a notice that is meant to only be seen by iOS users:

<p id="iosNote">Apple device users: To play videos, tap, pause, tap again.</p>

This script is to detect the iOS device type and set the style to display:

<script>
// iOS users need to double-tap to play videos.
if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/iPad/i)) {
    document.getElementById("iosNote").style.display = "block";
    } else {
    document.getElementById("iosNote").style.display = "none";
</script>

However, it is displayed in my Windows FF browser. Why would it not work? The script is just above the < /body > tag.

What do you have the useragent set to (it can be set to anything at all by the user of the browser or by the supplier of the browser).

I did not set a useragent.

Put another way, what does this output:

console.log(navigator.userAgent);

“Mozilla/5.0 (Windows NT 6.1; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0”

… that’s from my FF desktop browser.

which doesn’t contain any of the values that the if statement tests for therefore the else to set display:none should run.

To test the alternative simply change your useragent to include each of the values you are checking for in turn.

Since it doesn’t contain any of the values, then it simply shouldn’t appear on the screen. But it does! Why does it?

Where are you running the script, in the head before the DOM has loaded in, or before the closing body tag?

Why not set the element to display: none in your CSS and then use the JS to detect the iPhone and set it to display: block.

You could just do the whole thing without JS at all using media queries, too.

The answer turns out to be really obvious. You left out a } at the end of the script so the script isn’t able to run as it generates a syntax error.

All you needed to do was to turn on your debugger and you’d have seen the syntax error message.

Thank you!!

How odd, though, that I did not see the error when I ran the console.log the first time. It was on the same Console screen.

That’s true! I’m doing it the hard way.