Javascript li list from array with for loop

Question

I want to make li elements with properties like below but it doesn't work at all. Could you help me with what is wrong?

var array = [1, 2, 3, "mm", "b", "c", "mm", "y", "mm"];
var list = document.getElementById("list");

function addText(array) {
    for (var i = 0; i <= array.length; i++); {
        var text = array[i];
        if (array[i] == "mm") {
            var listItem = document.createElement("LI");
            listItem.innerHTML = text;
            list.appendChild(listItem);
        }     
    }
};

could you post all the rest of code to see when you're calling the addTect function and see if the list will be null or not ?? — PacMan
– PacMan, Commented Sep 1, 2016 at 18:00
You could easily track down problems like this by simply stepping through your code in a debugger. Do you know how to do that? Even if you don't, even adding a console.log inside the loop would have let you figure out what was going on. These are basic debugging techniques. — user663031
– user663031, Commented Sep 1, 2016 at 18:05

xorspark · Accepted Answer · 2016-09-01 18:12:02Z

4

The semicolon at the end of the for loop is the problem.

for (var i = 0; i <= array.length; i++); // <-- remove this

The semicolon makes the loop do nothing for array.length + 1 times instead of looping through the code in between the braces. You also want to change the <= to < so that you don't exceed the array boundary. Arrays are zero based, so your array of 9 items have indices from 0-8. You can also just compare text instead since you're copying it to a variable (not sure what was your intent since you can just get rid of the temporary outright).

Also, since you're just adding text, use textContent over innerHTML

Demo:

var array = [1, 2, 3, "mm", "b", "c", "mm", "y", "mm"];
var list = document.getElementById("list");

function addText(array) {
  for (var i = 0; i < array.length; i++) {
    var text = array[i];
    if (text == "mm") {
      var listItem = document.createElement("LI");
      listItem.textContent = text;
      list.appendChild(listItem);
    }
  }
}

addText(array);

<ul id="list">
</ul>

edited Sep 1, 2016 at 18:12

answered Sep 1, 2016 at 18:02

xorspark

16k2 gold badges33 silver badges40 bronze badges

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

4 Comments

user663031 Over a year ago

Good catch. Sounds very much like a comment and typo CV. You failed to catch the <= problem though. As long as you're fixing up his code, why not fix the duplicate reference to array[i], and change innerHTML to textContent?

xorspark Over a year ago

@torazaburo Caught the <= earlier. Tweaked the rest per your suggestions.

Marcin Misiak Over a year ago

Thank you, it helped me a lot. I have a question and sorry if it's stupid, i'm just starting with this. Why the <= is bad and should be <? I want my function to check all the elements in the array. Second question is why textContent not innerHTML?

xorspark Over a year ago

@MarcinMisiak Good questions. You want < because arrays end at length - 1 since they're 0-indexed. You have nine items, but the valid indices are 0-8. Index 9 is invalid in this case so you want to loop from index 0-8, and end when i = 9, hence <; <= will end at 10, but the code will bomb trying to access index 9. textContent is preferred when you're only writing text inside an element as it is faster due to not having to parse any HTML. If you have HTML in your string, then innerHTML would be the way to go.

Rayner Villalba · Accepted Answer · 2016-09-01 18:21:11Z

0

var array = [1, 2, 3, "mm", "b", "c", "mm", "y", "mm"];
var list = document.getElementById("list");

function addText(array) {
  
  array.map(function(element) {
    if(element === 'm'){
      var listItem = document.createElement('LI');
      listItem.textContent = element;
      list.appendChild(listItem);
    }
  });
}

addText(array);

<ul id="list">
</ul>

answered Sep 1, 2016 at 18:21

Rayner Villalba

711 bronze badge

Comments

R. Azari · Accepted Answer · 2016-09-02 20:38:21Z

0

There are at least two reasons why your code might not work.

First:

your for loop is not doing much other than incrementing var i. You should remove the semicolon after the for loop. Change it to this:

for (var i = 0; i <= array.length; i++) {

Second:

When are you calling your javascript? If you're running document.getElementById before you define the element with id "list" then document.getElementById("list") will return undefined.

One solution is to define the script at the end of your body, such as:

  <body>
      <ul id="list">
      </ul>
        <script type="text/javascript">
            var array = [1, 2, 3, "mm", "b", "c", "mm", "y", "mm"];
            function addText(array) {
                var list = document.getElementById("list");
                for (var i = 0; i <= array.length; i++) {
                    var text = array[i];

                    if (array[i] == "mm") {
                        var listItem = document.createElement("LI");
                        listItem.innerHTML = text;
                        list.appendChild(listItem);
                    }     
                }
            };
            window.onload = function(){ addText(array) };
        </script>

  </body>

edited Sep 2, 2016 at 20:38

answered Sep 1, 2016 at 18:10

R. Azari

911 silver badge5 bronze badges

2 Comments

gen_Eric Over a year ago

Your window.onload is incorrect here. addText() doesn't return a function. You probably want window.onload = function(){ addText(array); };

R. Azari Over a year ago

You're absolutely right, @RocketHazmat. Fixed. Thanks!

AbdelAziz Youssef · Accepted Answer · 2016-09-01 18:00:11Z

-1

What is the type of list element. It should be a "ul" element for that to achieve what you need.

answered Sep 1, 2016 at 18:00

AbdelAziz Youssef

961 silver badge5 bronze badges

1 Comment

user663031 Over a year ago

Well, this was not the problem.

Collectives™ on Stack Overflow

Javascript li list from array with for loop

4 Answers 4

4 Comments

Comments

First:

Second:

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

First:

Second:

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related