CODEWITHSUNDEEP
html
S Nash
S Nash

Reputation: 2499

HTML <noscript> tag does not work

Per definition <noscript> should show the text inside it if Javascript is disabled.

I used IE11 and disabled JavaScript to only see a blank page come up with no message at all.

<head>
<noscript>Javascript is disabled!</noscript>
<script>document.getElementById("demo").innerHTML="Script Enabled";</script>    
</head>
<p id="demo"> Test</p>

Am I missing something?

Upvotes: 3

Views: 5593

Answers (4)

barlop
barlop

Reputation: 13743

There an issue with the placement of your <script> tags and an issue with the placement of your <noscript>abc</noscript> tags.

A) For your <script> tag to function correctly it should run after the body not before. (Or if put before the body then some extra code to make sure it waits for the window or DOM to load i.e. what littlesanti did with window.onload)

B) For <noscript>abc</noscript> tags to run correctly, they should be within the body, since they contain text.

Upvotes: 0

David Xu
David Xu

Reputation: 179

You should put the noscript tag inside the body tag

Upvotes: 1

Little Santi
Little Santi

Reputation: 8783

Your page works for me if javascript is disabled: It prints the "javascript is disabled" message at the top.

But if I enabled it, does not change the "Test" text, because the script is executed before the page is loaded. And even if it was loaded, there is no <body>, so document.getElementById will return null.

A working correction could be this:

<!doctype html>
<html>
<head>
<noscript>Javascript is disabled!</noscript>
<script>window.onload=function(){document.getElementById("demo").innerHTML="Script Enabled";}</script>
</head>
<body>
<p id="demo"> Test</p> 
</body>
</html>

Upvotes: 1

Josh Murray
Josh Murray

Reputation: 637

From what you have told us above, it seems as if you have entered/used the correct syntax.

I tried it in Chrome 47 and works fine, maybe try it in different browsers and see your results OR make sure you have actually turned off JavaScript.

Example: 

<script>
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

From W3Schools - here

You could always do this too:

$(document).ready(function() {
  $('#noscript-description').css({
    'display' : 'none'
    
    // Just change the none to block to see the results
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <p id="noscript-description">This can be seen if you <b>DO NOT</b> have JavaScript enabled.</p>
    <!-- I have added in jQuery, if you never realised -->
  </body>
</html>

Upvotes: 3

Related Questions