Element not changing position when updating the style top and left

Question

This code below should change the position of the element but fails to do so.

//variables
var p1 = document.getElementById("player");
var px = 10;
var py = 10;

//@variables

//functions

function start() {
    setInterval(update, 100);
}

function update() {
    p1.style.left = (px + "px");
    p1.style.top = (py + "px");
    px = px + 10;
    py = py + 10;
}

//@functions

//start
start();
//@start`

my html is:

<html>
<head>
    <title> jumpy </title>

    <style type="text/css">
        #player {
            position: absolute;
            background-color: white;
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
        #body {
            background-color: black;
        }

    </style>

</head>
<body id="body">
    <script src="jumpy.js"> </script>
    <div id="player"> </div> 
</body>
</html>

Even though the position is absolute it still does not work. I have seen the answer at the bottom but it did not fix my problem.

Is p1 absolutely/relatively positioned? Because the `left` and `top` properties only work when that's the case. — Kerstomaat, May 31 '16 at 01:36
Your script is executed before the player is created. See my answer below. — Quentin Roy, May 31 '16 at 01:56

Quentin Roy · Accepted Answer · 2016-05-31T02:33:16.703

1

Your problem is that your script is run before your element is created. As a result document.getElementById("player"); returns nothing (the element is not loaded yet).

Move the script tag at the end of your body, or wrap your code in

window.addEventListener("load", function(){
  // Your code.
});

Appart from this, your code works fine (except that requestAnimationFrame should be used to create animation with js, not setInterval). If it does not, the problem is somewhere else.

window.addEventListener("load", function(){

  //variables
  var p1 = document.getElementById("player");
  var px = 10;
  var py = 10;

  //@variables

  //functions

  function start() {
    setInterval(update, 100);
  }

  function update() {
    p1.style.left = (px + "px");
    p1.style.top = (py + "px");
    px = px + 10;
    py = py + 10;
  }

  //@functions

  //start
  start();
  //@start`

});

#player {
  position: absolute;
  background-color: white;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
body {
  background-color: black;
}

<div id="player"></div>

edited May 31 '16 at 02:33

answered May 31 '16 at 01:39

Quentin Roy

6,617
2
28
48

*"except that requestAnimationFrame should be used to create animation with js, not setInterval"*, that's not entirely true. People also very often misuse `requestAnimationFrame` with having no `setInterval/setTimeout` in animations with logical code and games in JavaScript. – Spencer Wieczorek May 31 '16 at 01:46
@SpencerWieczorek In what cases would you use a `setInterval` to create an animation? – Quentin Roy May 31 '16 at 01:51
`requestAnimationFrame` should **only** be called when you wish to update the screen via repaint. It's not to replace timers used for updating the screen, it's not a replacement for code lodic execution. – Spencer Wieczorek May 31 '16 at 01:59
I agree that there is examples where it does not make sense (e.g. to create asynchronicity). However when it comes to animations (such as property animation like it is the case here), I don't see any examples where `setInterval/setTimeout`, that are not optimized for such operations, are more appropriate. – Quentin Roy May 31 '16 at 02:07

Element not changing position when updating the style top and left

1 Answers1