CODEWITHSUNDEEP
javascriptarrays
Joe Consterdine
Joe Consterdine

Reputation: 1053

Append Array Values To List Items

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];
    }
})

Upvotes: 0

Views: 2724

Answers (2)

digit
digit

Reputation: 4565

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];
})

Upvotes: 2

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93183

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

and NOT

items.innerHTML = itemList[i]

And remove the loop as @digit said .

Fiddle here

Upvotes: 2

Related Questions