You need to declare j outside the function. Otherwise, you’re always setting it to 0 every time the function is called.

Also, you’re running all instances of the function at the same time, 20 ms after the loop. You should multiply the timeout by the loop index:

Full demo:

var j = 0;

function myFunction2() {
  document.getElementById("demo").style.left = j + "px";
  j++;
}

function myFunction() {
  var i = 0;
  while (i <= 200) {
    setTimeout(myFunction2, 20 * i);
    i++;
  }
}

<span id="demo" style="position:absolute;left:0px;">Bu benim ilk paragrafım.</span><br> <button type="button" onclick="myFunction();">Try</button>

Or you could use setInterval() to run it repeatedly automatically.

function myFunction() {
  var j = 0;
  var int = setInterval(function() {
    if (j > 200) {
      clearInterval(int);
    } else {
      document.getElementById("demo").style.left = j + "px";
      j++;
    }
  }, 20);
}

<span id="demo" style="position:absolute;left:0px;">Bu benim ilk paragrafım.</span><br> <button type="button" onclick="myFunction();">Try</button>

It seems like you are declare the J variable inside the function and set it to 0 every time. So every time when you call the function you’re calling the timeout on same interval. And My solution is set the J Out side the function like a global variable and then try it.

var j = 0;
function myFunction2() {
    document.getElementById("demo").style.left = j + "px";
    j++;
}

function myFunction() {
    for (var i = 0; i <= 200; i++) {
        setTimeout(myFunction2, 20 * i);
    }
}

It is not working because whenever you are calling myFunction2(), variable j is initialized with 0 again and technically you are assigning 0px to demo. So that’s why it’s not shifting.

As said , you need to declare j as a variable outside the function itself , then you eventually test it within the function .

I would use for (){} instead while () {}

here is another example :

let j;// declare j 

function myFunction2() {
  if (!j) {// has j already a value ?
    j = 0;
  }
  document.getElementById("demo").style.left = j + "px";
  j++; // now it has a value, it can be incremented from here anytime the function is called
}

function myFunction() {
  for (let i = 0; i <= 200; i++) {
    setTimeout(myFunction2, i * 20);// increment settimeout for each loop 
  }
}

#demo {
  position: relative;
}

<div id="demo">test demo</div>
<button onclick="myFunction()">test myFunction</button>

Now, every time you call the function it increments the position of 200px away from lft. 1 click = 200px , 2click = 400px ;

Have fun coding 😉

i just started to learn JS. I want to change my span tag’s position with respect to time with JS setTimeout function. But it did not worked with this code. What am i doing wrong ?

     function myFunction2() {
        var j = 0;
        document.getElementById("demo").style.left = j + "px";
        j++;
    }

    function myFunction() {
        var i = 0;
        while (i <= 200) {
            setTimeout(myFunction2, 20);
            i++;
        }