'How to make a button move?

I'm going to make 8 buttons move down to the bottom of screen one by one but I have a problem
here is my code :

var i = 0;
var j = 0;
while(i < 7){
   i++;
   interval[i] = setInterval(interval(), 10);
   function interval(){
      y[j]++;
      if (parseInt(y[j]) >= window.innerHeight) {
        if(j == y.length - 1){
            debugger;
            return clearInterval(interval[j]);
        }
        j++;
        return interval();
      }
      button[j].style.top = y[j] + "px";
   }
   console.log(i);
}

var body = document.getElementById("body");
var button = [];
body.style.position = "relative";
var y = [];
for (var i = 0; i < 8; i++) {
    y[i] = 0;
    button[i] = document.createElement("button");
    button[i].onclick = clickme();
    button[i].innerHTML = "بازی";
    button[i].style.fontFamily = "b nazanin";
    button[i].style.fontSize = "32pt";
    button[i].style.position = "absolute";
    body.appendChild(button[i]);
}
var i = 0;
var j = 0;
var Interval = setInterval(interval(), 10);
function interval(){
    y[j]++;
    if (parseInt(y[j]) >= window.innerHeight) {
        if(j == y.length - 1){
            debugger;
            return clearInterval(Interval[j]);
        }
        j++;
        return interval();
    }
    button[j].style.top = y[j] + "px";
}
/*

var button2 = document.createElement("button");
button2.onclick = clickme();
button2.innerHTML = "بازی";
button2.style.fontFamily = "b nazanin";
button2.style.fontSize = "32pt";
body.appendChild(button);
body.appendChild(button2);
body.style.position = "relative";
button2.style.position = "absolute";
button.style.position = "absolute";
*/
function clickme() {

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body id="body">
    
</body>
<script src="index.js"></script>
</html>

Code explained :
button is my buttons element array. y is my button's Tops array. My problem is that the first button will move 7 times(Number of Is) and anything stop.I don't know what to do. Please help me.

javascript

Solution 1:^[1]

Ok, I did it with just 2 buttons and it worked :

var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var startNext = false;
var y1 = 0;
var y2 = 0;
var interval1 = setInterval(function(){
    y1++;
    button1.style.top = y1 + "px";
    if(y1>= window.innerHeight){
        startNext = true;
        return clearInterval(interval1);
    }
},10);
var interval2 = setInterval(function(){
    if(startNext){
        y2++;
        button2.style.top = y2 + "px";
        if(y2 >= window.innerHeight){
            return clearInterval(interval2);
        }
    }
},10);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body id="body" style="position: relative;">
    <button id="button1" style="position: absolute;">graege</button>
    <button id="button2" style="position: absolute;">ges</button>
</body>
<script src="index.js"></script>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Alireza932

'How to make a button move?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]