Why are array strings separated by a comma?

Question

I'm trying to make a list from info the user enters.

   var todoArray = new Array();

document.getElementById("addButton").onclick = function(){

    var temp = document.getElementById("inputBox").value;
    var appendTemp = "<li><input type=\"checkbox\">" + temp + "</li>";

    todoArray.push(appendTemp);

    document.getElementById("todoListUL").innerHTML = todoArray;

    console.log(todoArray);

}

But when the list times show up, they all have a comma between them, JSFiddle link for imagery here: JSFiddle

Why are they separated by this comma and how do I remove it?

Answer 1

When you assign any value to the .innerHTML property of an element, the value is implicitly converted to a string and then parsed as HTML. The default way that an array is converted to a string is via the .join() method, and the default array separator is a comma.

If you don't want anything, you can just call .join() yourself:

document.getElementById("todoListUL").innerHTML = todoArray.join("");

Answer 2

The issue is in this line:

document.getElementById("todoListUL").innerHTML = todoArray;

because the right member is converted to string and it is invoked internally the join method for todoArray array and default delimiter is comma .

Change it to

document.getElementById("todoListUL").innerHTML = todoArray.join("");