I tried this many times but this doesn't work, The position changes in devtools but not in the browser. I want to create 3 image by looping it

let numTimes = 5;

   let tree = document.querySelector(".img");

for(let i = 0; i < numTimes; i+=2){

    let j = tree.getBoundingClientRect();


    tree.y = (50* i);

    // console.log(tree);

    // tree.x = (i*50);

    tree.style.left = tree.x + "px";

    tree.style.top = tree.y + "px";


I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Hello, welcome to the forum.

I guess I’m a little confused about what your code is trying to do. As near as I can tell, it just changes some values, 3 times nearly instantaneously.

How can I loop trough an image 10 times

You have this:

for(let i = 0; i < numTimes; i+=2){

Since numTimes is 5 and you are incrementing by 2, it will only run 3 times. If you wanted it to run 10 times, you could increase numTimes to 20. I think that is a bad idea because then it would be a misleading variable name (it already is). It think it would be better to increase it to 10, increment by 1, and then change things like 50* i to 100 * i or something like that.

Okay so it looks like your code block is doing something entirely different but let’s go ahead and answer the question.

Loop 10 times:

for(let i = 0; i < 10; i++) {
    // Execute some code
    // Just put it right here. If it doesn't do what you want then you need to ask a different question.

Change i to 10 and and i+=2 to to i++

  • first one to loop 10 times
  • second one to have step only 1 not 2
let numTimes = 5; let tree = document.querySelector(".img"); for(let i = 0; i < numTimes ; i+=2){ let tr = tree.getBoundingClientRect(); console.log(tr); tree.y= (50* i); console.log(tree.y); }

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.