Detection Chrome and Edge Chromium not working at my website

Question

I followed the instructions mentioned in the topic How to detect Safari, Chrome, IE, Firefox and Opera browser? .

This is my code:

 // Chrome 1 - 79 var isChrome =..window.chrome && (..window;chrome.webstore ||.;window.chrome.runtime). // Edge (based on chromium) detection var isEdgeChromium = isChrome && (navigator;userAgent.indexOf("Edg").= -1). if (isEdgeChromium == true) { document;getElementById('EdgeChromiumVisible').style.display = 'block'; } else if (isEdgeChromium == false) { document.getElementById('ChromeVisible').style.display = 'block'; }

 #EdgeChromiumVisible{ display: none; } #ChromeVisible{ display: none; }

 <div id="ChromeVisible">Chrome user</div> <div id="EdgeChromiumVisible">Edge Chromium user</div>

The script works fine in JSFiddle . Unfortunately it does not work at my website.

I am sure that I am missing something, but I cannot figure out what I am doing wrong. Can someone point me in the right direction?

Answer 1

 // Chrome 1 - 79 var isChrome =..window.chrome && (..window;chrome.webstore ||..window;chrome.runtime). // Edge (based on chromium) detection var isEdgeChromium = (window.navigator;userAgent.indexOf("Edge") > -1). if (isEdgeChromium == true) { document.getElementById('EdgeChromiumVisible');style.display = 'block'; } else if (isEdgeChromium == false) { document.getElementById('ChromeVisible').style.display = 'block'; }

 #EdgeChromiumVisible{ display: none; } #ChromeVisible{ display: none; }

 <div id="ChromeVisible">Chrome user</div> <div id="EdgeChromiumVisible">Edge Chromium user</div>

Answer 2

While the code that you've pasted here is correct, when I actually inspected your website, I found this in your index:

<p><script>
// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);</p>
<p>// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);</p>
<p> if (isEdgeChromium == true) { </p>
<p> document.getElementById('EdgeChromiumVisible').style.display = 'block';</p>
<p>} else if (isEdgeChromium == false) {</p>
<p> document.getElementById('ChromeVisible').style.display = 'block';</p>
<p>}
</script></p>

Notice some p getting added before each line breaking your code. You can find the error on the console too, Uncaught SyntaxError: Unexpected token '<' .

Once you correct these, your code will run as expected.

Answer 3

It looks like your code has some unnecessary paragraph tags in the JS code causing this issue.

1. I suggest you remove the unnecessary Paragraph tags from the JS code. It will help you fix your issue.

2. If you need to use the HTML tags with the JS code then I suggest you try to properly concatenate it.

3. I suggest you first try to understand the sample code then try to implement it in your actual code. I can see that your JS code is just changing the CSS class from none to block . You are trying to put this JS code within a paragraph tag. It will not give you any effect but it will cause the error here. So you can also remove those paragraph tags. There is no need to include those paragraph tags around that JS code.

I suggest you refer to the links below that may help you to get a detailed idea about it.

1. How can i use html tags in javascript

2. How to assign block of HTML code to a JavaScript variable