Javascript for loop repeat function problem

Question

Does anybody know why this code does not create as many elements as I enter in the
repeat variable?

It creates only 1 element and not 5, why?

function create(el, w, h, bg, repeat){
    for(let i=0; i<repeat; i++){
      el = document.createElement(el);
      el.style.width = w;
      el.style.height = h;
      el.style.background = bg;

      document.body.appendChild(el);
    }
  }

  create("div","100px", "100px", "black", 5);

You're using el twice with two different meanings. The second iteration of the loop doesn't like it. — Federico klez Culloca
– Federico klez Culloca, Commented Nov 14, 2019 at 13:09

ibrahim mahrir · Accepted Answer · 2019-11-14 13:14:28Z

3

It's because you're overriding the variable el that holds the tag. After the first element gets inserted, el won't be "div" it will be the DOM element that just got inserted. Use different variables:

// notice the parameter is renamed from 'el' to 'elTag'

function create(elTag, w, h, bg, repeat) {
    for(let i=0; i<repeat; i++){
      let el = document.createElement(elTag);
      el.style.width = w;
      el.style.height = h;
      el.style.background = bg;

      document.body.appendChild(el);
   }
}

edited Nov 14, 2019 at 13:14

answered Nov 14, 2019 at 13:10

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Patrick Lüthi Over a year ago

This is a mistake by the OP. It wont help anyone in the future. If you answer, the question can not be deleted anymore. Still i dont understand why they need to downvote.

ibrahim mahrir Over a year ago

@PatrickLüthi There are plenty of these questions these days.

Patrick Lüthi Over a year ago

I know but it is not what stackoverflow is there for. It should be a question a lot of users can get a solution from and not just the OP.

Federico klez Culloca Over a year ago

@PatrickLüthi then should we vote to close as typo, in your opinion? I mean, closing is for avoiding people answering less than useful question, but none of the reasons in the close popup seem to match this one.

Patrick Lüthi Over a year ago

@FedericoklezCulloca you probalby know more about this than I do. It is just what i picked up from helping here. Most important thing is OP has his solution. But i dont think that there will be a lot or anyone that can solve a problem in the future cause of this answer.

Tareq · Accepted Answer · 2019-11-14 13:17:38Z

0

You are using el to createElement every time which is global variable in this case. in the next calls, el won't be a 'div' any more. can be solved by declaring local variables with different name than the parameter.

function create(tagName, w, h, bg, repeat){
    for(let i=0; i<repeat; i++){
      const text = document.createTextNode('Node number ' + i);
      const el = document.createElement(tagName);
      el.style.width = w;
      el.style.height = h;
      el.style.background = bg;
      el.style.color = 'white';
      el.appendChild(text);

      document.body.appendChild(el);
    }
  }

  create("div","100px", "100px", "black", 5);

edited Nov 14, 2019 at 13:17

answered Nov 14, 2019 at 13:11

Tareq

5,3732 gold badges18 silver badges18 bronze badges

Collectives™ on Stack Overflow

Javascript for loop repeat function problem

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related