JavaScript changing style of element - getting error

Question

I am trying to change the style of element by using JavaScript, however, I get this error when I try to: test.html:4 Uncaught TypeError: Cannot read property 'style' of null at test.html:4

This is my code:

<html>
<head>
  <script type="text/javascript">
    document.getElementById("test").style.marginTop="20px";
  </script>
</head>
<body>
  <p id="test">
    this is a test
  </p>
</body>
</html>

I am new to JavaScript, so sorry if I am doing something completely wrong, but everything seems fine to me. I'm probably doing some dumb mistake.

Possible duplicate of Why does jQuery or a DOM method such as getElementById not find the element? — Sebastian Simon
– Sebastian Simon, Commented Jun 14, 2017 at 1:26

MaxZoom · Accepted Answer · 2017-06-14 01:26:58Z

1

Your JavaScript code is executed before the document with p tag has been created.
To fix that put you code at the bottom of the body tag or in document load completed event.

<html>
  <head>
  </head>
  <body>
    <p id="test">
      this is a test
    </p>
    <script type="text/javascript">
      document.getElementById("test").style.marginTop="20px";
    </script>
  </body>
</html>

Additionally, placing scripts at the bottom of the 'body' element improves the display speed, because script compilation may slows down the display.

edited Jun 14, 2017 at 1:26

answered Jun 14, 2017 at 1:13

MaxZoom

7,7635 gold badges30 silver badges45 bronze badges

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

1 Comment

Will Reese Over a year ago

This is the best answer but you need to put the script tag before the body closing tag.

Krishna Satya · Accepted Answer · 2017-06-14 01:11:41Z

0

wrap it up in a event listener like this

window.onload = function(event){
  document.getElementById("test").style.marginTop="20px";
}

so when element becomes available you can use it. Currently element is not available as it tries to get element before page loads. so to run the code when element is available wrap it like above.

answered Jun 14, 2017 at 1:11

Krishna Satya

8852 gold badges10 silver badges21 bronze badges

Comments

Major Productions · Accepted Answer · 2017-06-14 01:04:57Z

0

It's a runtime error. Your JavaScript is attempting to access an element that doesn't yet exist when the statement is executed. Move your JavaScript code block to the bottom of your document.

answered Jun 14, 2017 at 1:04

Major Productions

6,11813 gold badges74 silver badges152 bronze badges

Comments

Thomas Maddocks · Accepted Answer · 2017-06-14 01:09:03Z

0

The problem here will be that the script is executed before the div with id="test" is on the page. You can either move the code to the bottom of the page or add an event listener for when the window is loaded like so:

<script type="text/javascript">
    window.addEventListener('load', function(){
        document.getElementById("test").style.marginTop="20px";
    });
</script>

answered Jun 14, 2017 at 1:09

Thomas Maddocks

1,3949 silver badges25 bronze badges

Collectives™ on Stack Overflow

JavaScript changing style of element - getting error

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related