For loop only loops 1 time - JavaScript

Question

Hi i am trying to make a for loop which will automatically add "dots" depending on how many images there are, i use the myArrImg.length but it only outputs a li with a class of dots once even tho it should do it four times? can anyone help me :)

var myArrImg = ['img/erftdgdf33.jpg','img/iajdi89.jpg','img/isdkfj01.jpg','img/wergf43.jpg'];

function dotsAuto(){
  var test = document.getElementById('test');
  var li = document.createElement('li');
  li.className = 'dots';

  for (i = 0; i < myArrImg.length; i++) {
    test.appendChild(li);
  }
}
dotsAuto();

You only ever create one li and append it repeatedly to the same parent, thereby making it look like it only happened once. Create the li inside the loop. — Niet the Dark Absol
– Niet the Dark Absol, Commented Dec 1, 2016 at 13:27
@NiettheDarkAbsol Why didn't you post this as answer instead ? Just to get likes ? This is an answer, you'll still get them — user5066707
– user5066707, Commented Dec 1, 2016 at 13:34
@FREEZE tbh I'm not sure. Somewhere in the last few months I kind of stopped answering most questions fully and just posted comments to simple ones like this. Like... questions that aren't particularly helpful to people at large, or maybe I'm being too judgmental? I don't know. At 211k reputation, why would I need more? XD — Niet the Dark Absol
– Niet the Dark Absol, Commented Dec 1, 2016 at 13:50

lonesomeday · Accepted Answer · 2016-12-01 13:33:07Z

Your problem is not what you think. The loop is operating the right number of times, but it is not doing what you intend.

The problem is that you only ever create one li element. You then repeatedly insert that same element. So the browser thinks you are doing this:

Create an li element. Give it a className. Now, start looping through the myArrImg array. On the first time, insert that li element. On the second time, insert that li element. On the third time, insert that li element. And so on.

You need to create new li elements each time, because any element can only exist once in the document. Essentially, you keep removing the element from the document and putting it back in the same place To create new elements each time, create the li within the loop:

var li;

for (i = 0; i < myArrImg.length; i++) {
  li = document.createElement('li');
  li.className = 'dots';
  test.appendChild(li);
}

balajisoundar · Accepted Answer · 2016-12-01 13:57:40Z

1

Here I created an ul since JSFiddle doesn't allow to manipulate document, but the process is the same

var myArrImg = ['img/erftdgdf33.jpg','img/iajdi89.jpg','img/isdkfj01.jpg','img/wergf43.jpg'];

function dotsAuto(){
  var test = document.getElementById('test');


  for (i = 0; i < myArrImg.length; i++) {
    var li = document.createElement('li');
      li.className = 'dots';
      li.innerHTML = myArrImg[i];
	  test.appendChild(li);
  }
}
dotsAuto();

<ul id="test">

</ul>

Basically you create ONE li for EACH loop cycle, and then append it to the list

edited Dec 1, 2016 at 13:57

balajisoundar

5712 silver badges11 bronze badges

answered Dec 1, 2016 at 13:31

Luca De Nardi

2,3212 gold badges19 silver badges36 bronze badges

Collectives™ on Stack Overflow

For loop only loops 1 time - JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related