Random commas in my HTML

Question

I have commas between my HTML buttons and i don't know where they come from. The div in which i create the buttons is empty before the buttons are being created.

In my JavaScript, i don't have any commas that could be put between the buttons as you can see below.

Here is a picture:

I create the buttons with JavaScript like so:

    var f = "'";
    contents[0]='<button class="btn" onclick="check('+ f + randomChar0 + f +');">' + randomChar0 + '</Button>';
    contents[1]='<button class="btn" onclick="check('+ f + randomChar1 + f +');">' + randomChar1 + '</Button>';
    contents[2]='<button class="btn" onclick="check('+ f + randomChar2 + f +');">' + randomChar2 + '</Button>';

    ranNum0 = randomize(2);
    document.getElementById("response").innerHTML = contents;

My HTML looks like this before i insert the buttons:

<div id="response" class="center-children">
</div>

And like this after i insert the buttons:

<div id="response" class="center-children">
    <button class="btn" onclick="check('B');">B</button>,
    <button class="btn" onclick="check('S');">S</button>,
    <button class="btn" onclick="check('E');">E</button>
</div>

If i check in the Browser, it looks like this:

I checked my whole JavaScript, even tried to delete all the CSS and HTML but the commas remain there...

Does anyone have a clue what might cause this?

Answer 1

The problem is that you are assigning the string value of your array to .innerHTML and the string value of an array has commas between the elements.

In order to combine the values in your array, use .join():

 document.getElementById("response").innerHTML = contents.join('');

Or better yet, don't use string manipulation to create DOM elements.

Answer 2

You're setting innerHTML to be an array, but it's supposed to be a string. Implicitly, .toString() is being called on your array, which leaves commas. Try it out, [1,2,3].toString() evaluates to "1,2,3".