how to apply a java script array with an already orded list in html

Question

Hi I was wondering if anyone could help me out. I need to apply an array I created in Java Script on the HTML page that already has the order list created.I keep on getting error messages that say "Cannot read property of 'inner.HTML' undefined. Any help would be greatly appreciated:) thanks! Here is my code:

    < div id = "results" >
     < ul >
     < li id = "1-1" > < /li>
             <li id="1-2"></li >
     < li id = "1-3" > < /li>
             <li id="1-4"></li >
     < li id = "1-5" > < /li>
                  </ul >
     < /div>
   </article >
     < script >
     //declared global variable with an array of variables.
     var places = ["Switzerland", "Canada", "Australia", "Norway", "New Zealand"]
       // function to place the country's name in the 
       // li id.

   function processPlaces() {
     var locations = "";
     for (var i = 0; i < places.length; i++) {
       var listItem = i + 1;
       var list = document.getElementById("1-" + listItem);

       locations = list.getElementsByTagName("li");
       locations[1].innerHTML += places[i];
     }

   }

    //runs setUpPage () function when page loads.
   if (window.addEventListener) {
     window.addEventListener("load", processPlaces, false);
   } else if (window.attachEvent) {
     window.attachEvent("onload", processPlaces, false);
   } < /script>

Thank you for explaining what I was doing wrong. This really helped me out:) — Zoe11
– Zoe11, Commented Feb 7, 2015 at 18:10

Travis J · Accepted Answer · 2015-02-06 23:21:31Z

ids cannot start with a number, so preface them with l or some letter (you can see the change in the snippet).

HTML elements cannot have spaces immediately following <, so < div> will render as text, and < /div> will also render as text. Make sure to remove all the excessive spacing.

Further, when you access the element with getElementById that is the actual <li> element, and using getElementsByTagName inside of that element will find nothing because there are no children to the <li> elements. Instead of taking that approach, remove it and simply use the <li> element you already have from using getElementById. Once you make these changes, your code should run as intended.

     //declared global variable with an array of variables.
     var places = ["Switzerland", "Canada", "Australia", "Norway", "New Zealand"]
       // function to place the country's name in the 
       // li id.

   function processPlaces() {
     var locations = "";
     for (var i = 0; i < places.length; i++) {
       var listItem = i + 1;
       var list = document.getElementById("l1-" + listItem);
       list.innerHTML = places[i];//directly access <li> element
       //locations = list.getElementsByTagName("li");
       //locations[1].innerHTML += places[i];
     }
   }

    //runs setUpPage () function when page loads.
   if (window.addEventListener) {
     window.addEventListener("load", processPlaces, false);
   } else if (window.attachEvent) {
     window.attachEvent("onload", processPlaces, false);
   }

<div id = "results">
  <ul>
    <li id = "l1-1"></li>
    <li id = "l1-2"></li >
    <li id = "l1-3"></li>
    <li id = "l1-4"></li >
    <li id = "l1-5"></li>
   </ul >
</div>

tjb · Accepted Answer · 2015-02-06 23:26:01Z

1

If the array is ordered already, why not just append to the <ul>? First set and id on your unordered list <ul id="myList">

 for (var i = places.length - 1; i >= 0; i--) {
     $('#myList').after($('<li />', { 'text': places[i] }));
};

JSFiddle

answered Feb 6, 2015 at 23:26

tjb

1088 bronze badges

2 Comments

digi Over a year ago

Why use jQuery for this?

tjb Over a year ago

OP tagged jQuery so I assumed it would be OK to use it.

digi · Accepted Answer · 2015-02-06 23:26:17Z

0

Cleaned it up a bit.

You can't have spaces right after < in your html tags. Also, you cant start IDs with numbers.

Edit: Too slow, Travis answer explains this much better :)

var places = ["Switzerland", "Canada", "Australia", "Norway", "New Zealand"];

function processPlaces() {
  for (var i = 0; i < places.length; i++) {
    document.getElementById('a-' + (i+1)).innerHTML = places[i];
  }

}

if (window.addEventListener) {
  window.addEventListener("load", processPlaces, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", processPlaces, false);
}

<div id="results">
  <ul>
    <li id="a-1"></li>
    <li id="a-2"></li>
    <li id="a-3"></li>
    <li id="a-4"></li>
    <li id="a-5"></li>
  </ul>
</div>

answered Feb 6, 2015 at 23:26

digi

2,7891 gold badge15 silver badges18 bronze badges

1 Comment

Zoe11 Over a year ago

Thank you for your answer. It really made my day much better:)

Collectives™ on Stack Overflow

how to apply a java script array with an already orded list in html

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related