4 Replies - 376 Views - Last Post: 18 September 2013 - 09:52 AM

#1 lledo3  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 28-February 11

Javascript Array

Posted 17 September 2013 - 07:32 AM

Hello,

So I have an array of strings that I would like to dynamically show up in an numbered ordered list. So far this is what is happening:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <title><!-- Insert your title here -->Test</title>
    <script type="text/javascript">
        
        var myList = new Array("One", "Two", "Three", "Four", "Five");
        
        var index;
        
            for(index = 0; index < myList.length; index++)
                {
                    document.writeln("<ol>" + myList[index] + "</ol>");
                }
        
    </script>
</head>
<body>
    <!-- Insert your content here -->
    
    <ol id="list1">
        
    </ol>
</body>


</html>


Here is the output:
One

Two

Three

Four

Five


How can I have the list show the numbers in front:
1. One
2. Two
3. Three
4. Four
5. Five

Is This A Good Question/Topic? 0
  • +

Replies To: Javascript Array

#2 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 8364
  • View blog
  • Posts: 31,073
  • Joined: 12-June 08

Re: Javascript Array

Posted 17 September 2013 - 07:34 AM

Quote

document.writeln("<ol>" + myList[index] + "</ol>");

This is wrong. You want <li> for 'list item.' The entire thing is wrapped in 'ol' to signify an 'ordered list'.
Was This Post Helpful? 0
  • +
  • -

#3 snoj  Icon User is offline

  • Married Life
  • member icon

Reputation: 84
  • View blog
  • Posts: 3,564
  • Joined: 31-March 03

Re: Javascript Array

Posted 17 September 2013 - 07:41 AM

You need to use something like createElement and appendChild to add things to a specific place in the DOM. document.write() places the string in the location the script is at. So in your code, it happens to be placed in the <head>, well before the <ol>.

Additioinally, you need to use <li> for list items, not <ol> which is for ordered lists
Was This Post Helpful? 0
  • +
  • -

#4 JoeSimmons  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 14
  • Joined: 10-August 13

Re: Javascript Array

Posted 18 September 2013 - 12:35 AM

As snoj said, you need to use createElement and appendChild.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <title><!-- Insert your title here -->Test</title>
    <script type="text/javascript">
        
        var myList = new Array("One", "Two", "Three", "Four", "Five");
        var index;
        var list1 = document.getElementById('list1');
        var li;
        
            for(index = 0; index < myList.length; index++)
                {
                    li = document.createElement('li');
                    li.textContent = myList[index];
                    list1.appendChild(li);
                }
        
    </script>
</head>
<body>
    <!-- Insert your content here -->
    
    <ol id="list1">
        
    </ol>
</body>


</html>

Was This Post Helpful? 0
  • +
  • -

#5 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 402
  • View blog
  • Posts: 1,719
  • Joined: 30-April 10

Re: Javascript Array

Posted 18 September 2013 - 09:52 AM

I like to use the jQuery library for most of my DOM manipulation just because it has so many shortcuts, like the .append(element) method.

This post has been edited by laytonsdad: 18 September 2013 - 09:52 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1