javascript array with function that adds the array values to a list on a web page

Question

I am a student just learning javascript. I am working on a simple assignment to create an array, create a function that will add the array values to a list. Here is my code attached. In my javascript for statement, I added "document.write(places[i] + "
");", however this only show a list of the values. It doesn't show up in the ul section on my webpage. Can you help correct this line of code. Any help would be appreciated.

<body>
<header>
<h1>
Hands-on Project 3-3
</h1>
</header>

<article>
<h2>Scouting Locations</h2>
<div id="results">
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
</div>
</article>
<script>
//array storing places to display
var places = ["Atlanta", "Nashville", "Dallas", "Los Angeles", "Miami"];

// function to generate list from array
function processPlaces() {
    var liElements = document.getElementsByTagName('li');
    for (var i = 0; i < 5; i++) { 
        // write each array element in places to its corresponding list item in liElements
        document.write(places[i] + "<br />");
    }
}
</script>
</body>
</html>

What you want to do exactly?

Sorangwala Abbasali
– Sorangwala Abbasali

2017-02-11 05:19:44 +00:00
Commented Feb 11, 2017 at 5:19 — Sorangwala Abbasali
– Sorangwala Abbasali, Commented Feb 11, 2017 at 5:19

Mr Lister · Accepted Answer · 2017-02-12 12:37:45Z

1

There are some cool things you can do with javascript and arrays.

So you have your basic for loop above, but here are some tricks.

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

In this example, you don't have to know the length of your array. Since arrays are zero-indexed, it will iterate 0 through the last item in your array (in your case index 4).

Now, your html, you can delete all your <li> tags, and change the opening <ul> to something like <ul id="places-list"></ul>

Don't worry about it being empty, you will fill it.

Use set of code to create new elements and append them to the DOM.

for (var i = 0; i < places.length; i++) {
  var listItem = document.createElement("li"); //creates new <li>
  var output = places[i]; //saves value of array at this index
  listItem.appendChild(output); //appends array value to <li>
  document.getElementById("places-list").appendChild(listItem); //appends <li> to <ul>
}

You don't need to wrap this loop in a function, unless you plan on calling the function afterwards, such as processPlaces();

I'm glad you are learning and things get much easier as you keep working. Then, when you learn jQuery, this gets even easier.

EDIT IN RESPONSE TO COMMENT:

Just change your code to the following if you don't want to change the html as written:

    for (var i = 0; i < places.length; i++) {
        var listItem = document.getElementById("item" + i); //grabs relevant <li>
        var output = places[i]; //saves value of array at this index
        listItem.appendChild(output); //appends array value to <li> as is
    }

edited Feb 12, 2017 at 12:37

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Feb 11, 2017 at 5:32

wlh

3,5451 gold badge21 silver badges34 bronze badges

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

1 Comment

Teresa Over a year ago

Thank you very much. You explained this well, however, I am trying to keep the code as written and just have the output replace each list item with the places in the array. Hope that makes sense.

guest271314 · Accepted Answer · 2017-02-11 05:23:29Z

0

Set .innerHTML of liElement at index i within for loop

for (var i = 0; i < 5; i++) { 
// write each array element in places to its corresponding list item in liElements
  liElements[i].innerHTML = places[i] + "<br />"
}

answered Feb 11, 2017 at 5:23

guest271314

1

Comments

Mr Lister · Accepted Answer · 2017-02-12 12:35:37Z

0

You can use following snippet to create new <ul> element with your array list in your HTML.

 <html>
  <body>
  <header>
<h1>
Hands-on Project 3-3
</h1>
  </header>
     <article>
   <h2>Scouting Locations</h2>
    <div id="results">
    <div id="renderList"></div>
  </div>
 </article>
<script>
(function(){
var ul = document.createElement('ul');
ul.setAttribute('id','proList');

var t, tt;
places = ["Atlanta", "Nashville", "Dallas", "Los Angeles", "Miami"];

document.getElementById('renderList').appendChild(ul);
places.forEach(renderplacesList);

function renderplacesList(element, index, arr) {
    var li = document.createElement('li');
    li.setAttribute('class','item');

      ul.appendChild(li);

    t = document.createTextNode(element);

    li.innerHTML=li.innerHTML + element;
  }
 })();
 </script>
 </body>
</html>

edited Feb 12, 2017 at 12:35

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Feb 11, 2017 at 5:47

AddWeb Solution Pvt Ltd

21.8k5 gold badges30 silver badges61 bronze badges

1 Comment

Teresa Over a year ago

Thank you. This version worked also. I just added liElements[i].innerHTML = places[i] + "<br />" as given above.

Collectives™ on Stack Overflow

javascript array with function that adds the array values to a list on a web page

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related