CODEWITHSUNDEEP
javascript
maiamachine
maiamachine

Reputation: 280

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

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;

}

Upvotes: 2

Views: 3930

Answers (5)

james emanon
james emanon

Reputation: 11807

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++){

Upvotes: 1

Rob M.
Rob M.

Reputation: 36511

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/

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191729

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/

Upvotes: 1

Philip Tenn
Philip Tenn

Reputation: 6073

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>

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150020

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

Upvotes: 3

Related Questions