CODEWITHSUNDEEP
javascripthtmlcss
KevinKelbie
KevinKelbie

Reputation: 37

Javascript not changing css

    <!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!

Upvotes: 0

Views: 2165

Answers (3)

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

  <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

Upvotes: 1

Mykola Borysyuk
Mykola Borysyuk

Reputation: 3411

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.

Upvotes: 0

StardustGogeta
StardustGogeta

Reputation: 3406

    <!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.

Upvotes: 0

Related Questions