Append Array Values To List Items

Question

I'm trying to output an array of items to a list. The problems is when I click submit it's adding all the array items to each list item instead of one each time.

JSFIDDLE: https://jsfiddle.net/b7Lwbrof/

Thanks!

var itemList = [];
var container = document.getElementById('container');

// On click
document.getElementById('submit').addEventListener("click", function(){
    var itemValue = document.getElementById('itemValue').value;

    // Push to array
    itemList.push(itemValue);

    // Append to List
    for(i=0; i<itemList.length; i++) {
        var items = document.createElement("li");
        document.getElementById('container').appendChild(items);
        items.innerHTML = itemList[i];
    }
})

you could either append the last item to the list, or rewrite the whole list. — Nina Scholz
– Nina Scholz, Commented Feb 12, 2017 at 10:53

digit · Accepted Answer · 2017-02-12 10:54:11Z

2

You don't need loop then, just append the item after it has been push to the itemList.

document.getElementById('submit').addEventListener("click", function(){
    var itemValue = document.getElementById('itemValue').value;

    // Push to array
    itemList.push(itemValue);

    // Append to List
     var items = document.createElement("li");
     document.getElementById('container').appendChild(items);
     items.innerHTML = itemList[itemList.length-1];
})

edited Feb 12, 2017 at 10:54

answered Feb 12, 2017 at 10:48

digit

4,5653 gold badges30 silver badges46 bronze badges

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

Comments

Abdennour TOUMI · Accepted Answer · 2017-02-12 10:51:13Z

2

items.innerHTML = itemList[itemList.length - 1] // get the last

and NOT

items.innerHTML = itemList[i]

And remove the loop as @digit said .

Fiddle here

answered Feb 12, 2017 at 10:51

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

Collectives™ on Stack Overflow

Append Array Values To List Items

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related