我的HTML中的随机逗号

Question

我的HTML按钮之间有逗号，我不知道它们来自哪里。 在创建按钮之前，我创建按钮的div是空的。

在我的JavaScript中，我没有任何逗号可以放在按钮之间，如下所示。

这是一张图片：

我用JavaScript创建按钮：

    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;

在插入按钮之前，我的HTML看起来像这样：

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

在我插入按钮之后就像这样：

<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>

如果我在浏览器中检查，它看起来像这样：

我检查了整个JavaScript，甚至试图删除所有的CSS和HTML，但逗号仍在那里......

有没有人知道可能导致这种情况的原因？

Answer 1

问题是你要将数组的字符串值赋给.innerHTML，并且数组的字符串值在元素之间有逗号。

要合并数组中的值，请使用.join()：

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

或者更好的是，不要使用字符串操作来创建DOM元素。

Answer 2

您将innerHTML设置为数组，但它应该是一个字符串。隐含地，在您的数组上调用.toString()，这会留下逗号。试一试，[1,2,3].toString()评估为"1,2,3"。