Modify Div Element with javascript

Question

My script wont run or the document.getElementById("toMove"); doesn't seem to catch the element. Its very basic javascript but I cant understand why its not working.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
    #toMove
    {
        background-color:lightblue;
        position:absolute;
    }
    </style>
        <script>
        var elem = document.getElementById("toMove");
        elem.style.margin = "600px";
    </script>   
</head>
    <body>  
<div id="toMove" style="margin:200px; font-size:26px;"> Hello World</div> 
    </body>

Thanks

Yes, thanks. That was just a copy paste error. The main problem was that the element was not in the DOM yet as pointed out bellow. — djcj
– djcj, Commented Jan 19, 2014 at 13:04

Satpal · Accepted Answer · 2014-01-19 12:49:02Z

1

Close your the tag properly. Problem is that when your scripts executes your element toMove does not exists in DOM

Wrap your code in window.onload. The function execute a JavaScript when a page is finished loading.

 window.onload = function(){
    var elem = document.getElementById("toMove");
    elem.style.margin = "600px";
 }

OR, Simply write your script at after you HTML declartion

edited Jan 19, 2014 at 12:49

answered Jan 19, 2014 at 12:40

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:15:42Z

1

The problem is that this script must run once the DOM is ready (all elements rendered in the browser) Wrap the script like described here:

pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

Or if you use jquery with

$('document').ready(function(){});

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Jan 19, 2014 at 12:42

vanthome

4,94240 silver badges46 bronze badges

Comments

Russ Cam · Accepted Answer · 2014-01-19 12:47:21Z

0

There's a couple of reasons why it's not working

You need to close the <head> tag properly
The point at which your script runs, the element with the id toMove does not yet exist in the DOM (Document Object Model)

Solving number 1 should be easy enough, just change </head to </head>. To solve number 2, you need to ensure that the script fires after the element with id toMove exists in the DOM. You can do this by hooking up your script to fire when the window has finished loading. The code below sets up a function to fire when the window has finished loading

window.onload = function(){
   var elem = document.getElementById("toMove");
   elem.style.margin = "600px";
}

answered Jan 19, 2014 at 12:47

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

Comments

Gaucho_9 · Accepted Answer · 2014-01-19 12:42:26Z

0

You must close head tag correctly.

</head>

And also do the code of Satpal.

answered Jan 19, 2014 at 12:42

Gaucho_9

2651 gold badge3 silver badges11 bronze badges

5 Comments

Roko C. Buljan Over a year ago

This is rather a comment to Satpal's answer

Satpal Over a year ago

@RokoC.Buljan, He don't have enough reputation now, Hopefully he will get there

Satpal Over a year ago

@RokoC.Buljan, its 50

Gaucho_9 Over a year ago

Sorry, I can't make comments of publications of other people since I get 50 of reputation.

Satpal Over a year ago

You will eventually get there mate :). I know that

Tom Cruise · Accepted Answer · 2014-01-19 12:43:51Z

0

This will work.

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <style>
        #toMove
        {
            background-color:lightblue;
            position:absolute;
        }
        </style>

    </head
        <body>  
    <div id="toMove" style="margin:200px; font-size:26px;"> Hello World</div> 
        </body> 
         <script>
             var elem = document.getElementById("toMove");
              elem.style.margin = "500px";
        </script>  
        </html>

answered Jan 19, 2014 at 12:43

Tom Cruise

1,42512 gold badges34 silver badges60 bronze badges

Collectives™ on Stack Overflow

Modify Div Element with javascript

5 Answers 5

Comments

Comments

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related