I have mas between my HTML buttons and i don't know where they e 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 mas 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 mas remain there...

Does anyone have a clue what might cause this?

I have mas between my HTML buttons and i don't know where they e 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 mas 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 mas remain there...

Does anyone have a clue what might cause this?

• javascript
• html
• css

• 2 Not random mas, check at the end of your buttons tags and look the ma. – AshBringer Commented May 16, 2015 at 19:11
• end of the <button> you have mas – Ritesh Karwa Commented May 16, 2015 at 19:14
• Remove mas after button <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> – Ritesh Karwa Commented May 16, 2015 at 19:15
• 1 @RiteshK You're missing the point. OP is generating the buttons using JavaScript, not static HTML. The HTML shown here is what the JavaScript is generating so the question is: where are the mas ing from? The answers are below. – JLRishe Commented May 16, 2015 at 19:17

2 Answers 2

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

In order to bine 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.

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 mas. Try it out, [1,2,3].toString() evaluates to "1,2,3".