Random commas in my HTML
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 created.
In my JavaScript, I don't have any commas that can be placed between the buttons, as you can see below.
Here's a picture:
I am creating buttons with JavaScript like this:
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 inserting the buttons:
<div id="response" class="center-children">
</div>
And like this after entering 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 register the browser it looks like this:
I checked all my JavaScript, even tried to remove all CSS and HTML, but the commas stay there ...
Does anyone know what might be causing this?
source to share
The problem is that you are assigning the string value to your array .innerHTML
and the string value of the array has a comma between the elements.
To concatenate 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.
source to share