Trouble using JavaScript for loop to populate an array with HTML divs

Question

I'm trying to populate the contents of an array with the HTML from 5 different div elements using a loop. I can't get the for loop to work correctly. Any ideas?

The HTML:

<div id="person0">John</div>
<div id="person1">Kathleen</div>
<div id="person2">Cynthia</div>
<div id="person3">Eric</div>
<div id="person4">Jay</div>



<div style="width: 600px; margin: auto; padding: 15px; border: 1px solid gray; font-family: sans-serif;">
        <h1>The People</h1>
        <div id="result"></div>
</div>

The Javascript:

function pageLoaded(){

  var list = "<ul>";
  var myArray = new Array();

  for(i=0; i<6; i++){
    var person = "person";
    var personNumber = "" + i.toString();
    var divId = person.concat(personNumber);
    myArray[i] = document.getElementById(divId).innerHTML;
    list +="<li>"+myArray[i]+"</li>";
  }


  list +="</ul>";

  document.getElementById("result").innerHTML=list;

}

I know it's not an answer, but have you looked into using jQuery? It makes JavaScript development much easier and more elegant. — Philip Tenn
– Philip Tenn, Commented Feb 24, 2013 at 2:04
I've definitely thought about that but I'm trying to get better at JS functions so sort of doing this for practice :) — maiamachine
– maiamachine, Commented Feb 24, 2013 at 2:05
good for you on practicing core JS, best wishes with that. Tossed together a page with your HTML and JavaScript, with some alerts, got it working. — Philip Tenn
– Philip Tenn, Commented Feb 24, 2013 at 2:14

nnnnnn · Accepted Answer · 2013-02-24 02:04:07Z

3

Just change the for condition from i<6 to i<5.

You were running the loop one too many times, which meant on the sixth iteration when you did:

myArray[i] = document.getElementById(divId).innerHTML;

You were looking for an element with id of "person5", so getElementById() returned null which gave the error:

Uncaught TypeError: Cannot read property 'innerHTML' of null

...which stopped your script from completing.

Demo: http://jsbin.com/awubeq/1/edit

answered Feb 24, 2013 at 2:04

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

2 Comments

maiamachine Over a year ago

Thanks! Wow--it's always some silly little mistake like that. I always forget that arrays start with the index at 0. This fixed it.

user2818847 Over a year ago

I have something like: <div><span> </span></div> When I use your code, and I use "alert" to show me the result, the result inside the div is the text + "<span> </<span>". How can I overcome this?

Philip Tenn · Accepted Answer · 2013-02-24 02:12:28Z

Here's a working solution (plus some alerts):

<html>
<head>
   <title>Test</title>
   <script>

function pageLoaded()
{
  alert("called pageLoaded");
  var list = "<ul>";
  var myArray = new Array();

  for(i=0; i<5; i++){
    var person = "person";
    var personNumber = "" + i.toString();
    var divId = person.concat(personNumber);
    myArray[i] = document.getElementById(divId).innerHTML;
    alert("myArray[i]=" + myArray[i]);
    list +="<li>"+myArray[i]+"</li>";

  }


  list +="</ul>";

  alert(list);


  document.getElementById("result").innerHTML=list;

}
</script>
</head>

<body onload="pageLoaded()">

<div id="person0">John</div>
<div id="person1">Kathleen</div>
<div id="person2">Cynthia</div>
<div id="person3">Eric</div>
<div id="person4">Jay</div>



<div style="width: 600px; margin: auto; padding: 15px; border: 1px solid gray; font-family: sans-serif;">
        <h1>The People</h1>
        <div id="result"></div>
</div>

</body>
</html>

Explosion Pills · Accepted Answer · 2013-02-24 02:12:42Z

1

If you use an iterator, you don't have to worry about knowing the size of the target of iteration.

document.getElementById('result').innerHTML =
Array.prototype.reduce.call(document.querySelectorAll('[id^=person]'),
    function (prev, elem) {
       return prev + '<li>' + elem.innerHTML + '</li>';
}, '<ul>') + '</ul>';

http://jsfiddle.net/ExplosionPIlls/Avfjs/1/

answered Feb 24, 2013 at 2:12

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Comments

james emanon · Accepted Answer · 2013-02-24 05:41:38Z

1

You are looping thru more divs than you have. If you switch it to 4, it works.

for(i=0; i<5; i++){

or 

for(i=0; i<=4; i++){

edited Feb 24, 2013 at 5:41

answered Feb 24, 2013 at 2:08

james emanon

11.9k12 gold badges70 silver badges107 bronze badges

1 Comment

nnnnnn Over a year ago

That will skip the last item. Needs to be <=4 or <5.

Rob M. · Accepted Answer · 2013-02-24 02:32:07Z

0

Since you are practicing, I just wanted to point out that you should reconsider the markup as this is not a case for using an id attribute but for a class. The id approach, though common, is incorrect and requires more code than necessary. Here is an example with better markup, which makes using javascript with it much more straightforward.

http://jsfiddle.net/3gpe8/

answered Feb 24, 2013 at 2:32

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

Collectives™ on Stack Overflow

Trouble using JavaScript for loop to populate an array with HTML divs

5 Answers 5

2 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related