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, Jan 19 '14 at 13:04

Satpal · Answer 1 · 2014-01-19T12:49:02.147

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 '14 at 12:49

answered Jan 19 '14 at 12:40

Satpal

132,252
13
159
168

score 1 · Answer 2 · edited May 23 '17 at 12:15

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 '17 at 12:15

Community

1
1

answered Jan 19 '14 at 12:42

vanthome

4,816
37
44

score 0 · Answer 3 · answered Jan 19 '14 at 12:42

0

You must close head tag correctly.

</head>

And also do the code of Satpal.

answered Jan 19 '14 at 12:42

Gaucho_9

265
1
3
11

This is rather a comment to Satpal's answer – Roko C. Buljan Jan 19 '14 at 12:44
@RokoC.Buljan, He don't have enough reputation now, Hopefully he will get there – Satpal Jan 19 '14 at 12:46
@RokoC.Buljan, its 50 – Satpal Jan 19 '14 at 12:53
Sorry, I can't make comments of publications of other people since I get 50 of reputation. – Gaucho_9 Jan 19 '14 at 12:59
You will eventually get there mate :). I know that – Satpal Jan 19 '14 at 13:04

score 0 · Answer 4 · answered Jan 19 '14 at 12:43

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>

score 0 · Accepted Answer · answered Jan 19 '14 at 12:47

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";
}

Modify Div Element with javascript

5 Answers5