Make a html unordered list from javascript array

Question

I'm having a bit of a problem. I'm trying to create a unordered list from a javascript array, here is my code:

var names = [];
var nameList = "";

function submit()
{
var name = document.getElementById("enter");
var theName = name.value;
names.push(theName);
nameList += "<li>" + names + "</li>";
document.getElementById("name").innerHTML = nameList;
}


<input id="enter" type="text">
<input type="button" value="Enter name" onclick="submit()">
<br>
<br>
<div id="name"></div>

For example, if I post 2 names, Name1 and Name2 my list looks like this:

•Name1

•Name1,Name2

I want it to look like this:

•Name1
•Name2

Side note: Don't use a custom function with name "submit" inside an inline event handler. As soon as you put the elements inside a form, submit will refer to the submit method of the <form> element. Also, your div element should be a ul element. — Felix Kling
– Felix Kling, Commented Feb 23, 2015 at 16:08

rgthree · Accepted Answer · 2015-02-23 16:38:55Z

9

If you look at your code, you are only creating one li with all your names as the content. What you want to do is loop over your names and create a separate li for each, right?

Change:

nameList += "<li>" + names + "</li>";

to:

nameList = "";
for (var i = 0, name; name = names[i]; i++) {
  nameList += "<li>" + name + "</li>";
}

If you are interested in some better practices, you can check out a rewrite of your logic here: http://jsfiddle.net/rgthree/ccyo77ep/

edited Feb 23, 2015 at 16:38

answered Feb 23, 2015 at 16:01

rgthree

7,28319 silver badges21 bronze badges

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

3 Comments

Felix Kling Over a year ago

Note that the loop won't handle "empty" names very well. But such validation logic is for the OP to implement.

marcel jager Over a year ago

If I do this it looks a bit better, but now I still get the previous results in another list item, if I now enter Name2 it's not the second but the third list item and Name1 is the first and second list item.

rgthree Over a year ago

@marceljager Yes, you have nameList as a variable outside the submit closure, so it's always appending the same items. I've updated my answer so that with each submit call, nameList blanks itself out. That should do it for you :)

Mouser · Accepted Answer · 2015-02-23 16:15:06Z

5

function submit()
{
  var name = document.getElementById("enter");
  var theName = name.value;
  names.push(theName);
  document.getElementById("name").innerHTML = "";
  for (var I = 0; I < names.length; I++)
  {
       nameList = "<li>" + names[I] + "</li>";
       document.getElementById("name").innerHTML += nameList;
  }
}

You are using an array, when you print an array JavaScript will show all the entries of the array separated by commas. You need to iterate over the array to make it work. However you can optimize this:

var names = [];


function displayUserName()
{
  var theName = document.getElementById("enter").value;
  if (theName == "" || theName.length == 0)
  {
     return false; //stop the function since the value is empty.
  }
  names.push(theName);
  document.getElementById("name").children[0].innerHTML += "<li>"+names[names.length-1]+"</li>";
}

<input id="enter" type="text">
<input type="button" value="Enter name" onclick="displayUserName()">
<br>
<br>
<div id="name"><ul></ul></div>

In this example the HTML is syntactically correct by using the UL (or unordered list) container to which the lis (list items) are added.

document.getElementById("name").children[0].innerHTML += "<li>"+names[names.length-1]+"</li>";

This line selects the div with the name: name and its first child (the ul). It then appends the LI to the list.

As @FelixKling said: avoid using reserved or ambiguous names.

edited Feb 23, 2015 at 16:15

answered Feb 23, 2015 at 16:02

Mouser

13.3k3 gold badges30 silver badges54 bronze badges

4 Comments

Felix Kling Over a year ago

No explanation is already bad, but this one actually produces incorrect results.

David Thomas Over a year ago

You should probably explain what problem(s) your code solves, and how. Code, by itself, is rarely useful as a teaching aid (and answering questions does, however tenuously, constitute 'teaching').

Mouser Over a year ago

@FelixKling overlooked the += it's gone now.

marcel jager Over a year ago

Thanks! This helped me, now I can make it pretty with css. :)

David Cameron · Accepted Answer · 2017-01-10 05:54:38Z

<div>

    <label for="new-product">Add Product</label><br /><br /><input id="new-product" type="text"><br /><br /><button>Add</button>

</div>

<div>
  <ul id="products">
  </ul>
  <p id="count"></p>
</div>

  var products = [];
  var productInput = document.getElementById("new-product");

  var addButton = document.getElementsByTagName("button")[0];
  var productListHtml = "";
  var abc = 0;

  addButton.addEventListener("click", addProduct);

  function addProduct() {
      products.push(productInput.value);

      productList();


  }

  function productList() {                    
          productListHtml += "<li>" + products[abc]    + "</li>";
          document.getElementById("products").innerHTML = productListHtml;
          abc++;    
      }

Collectives™ on Stack Overflow

Make a html unordered list from javascript array

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related