Javascript not changing css

Question

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #b {
            display: none;
        }
    </style>
    <script type="text/javascript">
        document.getElementById("b").style.display = block;
    </script>
</head>
<body>
    <h1 id="b">Hello</h1>
</body>
</html>

Does anyone know what I'm doing wrong here? Shouldn't the CSS be changed by the javascript and display Hello. Thanks for any help!

Just remember accessing thru .style.<style> works only for inline styles. You should also wait until document is ready. Place script inside body — Andrew Li
– Andrew Li, Commented Sep 11, 2016 at 20:16
Move script tag after h1 ...and all should be OK...you trying to change value for something that doesn't exists at the time it executes. — Mykola Borysyuk
– Mykola Borysyuk, Commented Sep 11, 2016 at 20:19
Change block to "block", you aren't referencing a variable. And place your script after the body closing tag, that way it will be executed after parsing the HTML (the element "is there" to be selected by your code). — yuriy636
– yuriy636, Commented Sep 11, 2016 at 20:22

Baezid Mostafa · Accepted Answer · 2016-09-11 20:33:39Z

1

  <head>
<title></title>
<style type="text/css">
    #b {
        display: none;
    }
</style>

</head>
 <body>
  <h1 id="b">Hello</h1>
 <script type="text/javascript">
     document.getElementById('b').style.display = "block";
   </script>
  </body>
</html>

Try this its better to create custom.css file and link in head section. and also create custom.js file and link with your html befor /body tag end

answered Sep 11, 2016 at 20:33

Baezid Mostafa

2,7382 gold badges16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

StardustGogeta · Accepted Answer · 2016-09-11 20:21:45Z

0

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #b {
            display: none;
        }
    </style>
    
</head>
<body>
    <h1 id="b">Hello</h1>
</body>
</html>
<script type="text/javascript">
        document.getElementById("b").style.display = 'block';
    </script>

Put the block in quotes and move the <script> tag to the end.

answered Sep 11, 2016 at 20:21

StardustGogeta

3,3932 gold badges21 silver badges34 bronze badges

Comments

Mykola Borysyuk · Accepted Answer · 2016-09-11 20:22:59Z

0

You trying to change value of something that doesn't exists in the moment you execute JS...Move all JS before closing html tag like so

<script>Your code here<script>
</html>

here is the demo

https://jsbin.com/qacayuruyu/edit?html,js,output

Hope this helps.

answered Sep 11, 2016 at 20:22

Mykola Borysyuk

3,4211 gold badge22 silver badges24 bronze badges

Collectives™ on Stack Overflow

Javascript not changing css

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related