Почему js не меняет значение top?

Question

[firedemonyt]

<div class="main__middle">
        <div class="scroll"></div>
        <div class="scroll__main">
          <div id="scroll__red"></div>
        </div>
        <p class="scroll__counter">01</p>
      </div>

.scroll__main {
  position: relative;
  height: 400px;
  width: 2px;
  background-color: #fff;
  margin-left: 71px;
}

#scroll__red {
  position: absolute;
  height: 100px;
  width: 4px;
  background-color: #dd2242;
  margin-left: -0.4px;
  top: 0;
}

var height = document.getElementById("scroll__red");
var h = [0, 100, 200, 300];
var counter = 1;
function change() {
  document.style.top = h[counter];
  counter++;

  if (counter > h.length - 1) {
    counter = 0;
  }
}

setInterval(change, 2000);

Comments

[StiflerProger]

всё что выполняет интервал, это вот этот участок кода

var height = document.getElementById("scroll__red");
var h = [0, 100, 200, 300];
var counter = 1;

[firedemonyt]

var height = document.getElementById("scroll__red");
var h = [0, 100, 200, 300];
var counter = 1;
function change() {
  document.style.top = h[counter];
  counter++;

  if (counter > h.length - 1) {
    counter = 0;
  }
}

setInterval(change, 2000);

а так?

[Lynn «Кофеман»]

Потому что не хватает единиц изменения.

[StiflerProger]

firedemonyt, style top

document.getElementById("myBtn").style.top = "100px";

у вас устанавливается document.getElementById("myBtn").style.top = 100;

Answer 1

[HardBot]

const scroll_red = document.querySelector('#scroll__red')
const arr = [0, 100, 200, 300]

let counter = 1

setInterval(() => {
    if (++counter > arr.length - 1) counter = 0
    scroll_red.style.top = arr[counter] + 'px'
}, 2000)

Comments

[firedemonyt]

а как можно добавить плавности?

[HardBot]

firedemonyt, в css элементу scroll_red дайте transition: top .5s;