Moving Element from top to bottom with setInterval

Question

I want to move an element from top to bottom, adding 1px to its top every 10millisecond using setInterval

This is my code:

var cir1 = document.getElementsByClassName('cir1');

function moveCir(elem) {
    var elemTop = elem.style.top + 'px';
    elem.style.top = elemTop;
    elem.style.top = elemTop + 1 + 'px' ;
    setInterval(function () {
        moveCir(elem)
    },10)
}

.cir1 {
    height: 100px;
    width: 100px;
    margin: 30px 100px;
    border: 1px solid #AC0D67;
    border-radius: 100%;
    display: inline-block;
}

<button onclick="moveCir(cir1)" id="start">Start</button>
<div class="cir1"></div>

But I cant find out why its not working

Please provide a m-c-v-e -> https://stackoverflow.com/help/mcve — Exception_al, Feb 16 '18 at 11:14
I think you have to remove the "px" at the end before incremeting it — , Feb 16 '18 at 11:17
Your **first** problem is a duplicate of [this](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Quentin, Feb 16 '18 at 11:18
Another problem might be (depending on how the whole html is set up) that in: `moveCir(cir1)` `cir1` might be undefined. — Yoshi, Feb 16 '18 at 11:19
document.getElementsByClassName returns an array so u have to do document.getElementsByClassName('cir1')[0]; — , Feb 16 '18 at 11:24
Also recursively calling `setInterval` will result break sooner or later. — Yoshi, Feb 16 '18 at 11:31

xianshenglu · Accepted Answer · 2018-02-16T11:39:45.250

i guess you want this:

function moveCir(elem) {
  var elemTop = elem.getBoundingClientRect().top;
  if (elemTop < 200) {
    elem.style.top = elemTop + 1 + 'px';
    setTimeout(function() {
      moveCir(elem)
    }, 100)
  }
}

#cir1 {
  height: 100px;
  width: 100px;
  margin: 30px 100px;
  border: 1px solid #AC0D67;
  border-radius: 100%;
  display: inline-block;
  position: absolute;
}

<button onclick="moveCir(cir1)" id="start">Start</button>
<div id="cir1"></div>

however,i have to warn you :

this is a bad idea :

onclick="moveCir(cir1)"

a better solution is here:

var moveCir = function f(elem) {
  var elemTop = elem.getBoundingClientRect().top;
  if (elemTop < 200) {
    cir1.style.top = elemTop + 1 + 'px';
    setTimeout(f, 100, elem);
  }
};

var cir1 = document.getElementById('cir1');
document.getElementById('start').addEventListener('click', function() {
  moveCir(cir1)
}, false);

#cir1 {
  height: 100px;
  width: 100px;
  margin: 30px 100px;
  border: 1px solid #AC0D67;
  border-radius: 100%;
  display: inline-block;
  position: absolute;
}

<button id="start">Start</button>
<div id="cir1"></div>

score 0 · Answer 2 · answered Feb 16 '18 at 11:56

var cir = document.getElementsByClassName('cir1')[0];
var cirTop = cir.style.top;
function moveCir() {
cirTop++;
cir.style.top = cirTop + 'px';
}
setInterval(moveCir, 10);

class names are taken as an array. You have not included [0] in document.getElementsByClassName('cir1')

Moving Element from top to bottom with setInterval

2 Answers2