javascript - 一键式多功能数组

Question

我正在尝试创建这段代码，其中一个元素被插入数组，显示并添加一个样式，为它们提供随机的十六进制颜色。我得到了十六进制颜色并部分完成了插入数组，但我似乎无法添加样式或显示 div……这是我目前的代码:

JS

var colorBg = '#' + (Math.random() * 0xFFFFFF << 0).toString(16)
var elements = []
var el = '<div class="element bg"></div>'

document.getElementById("addEl").onclick = () => {
    elements.push(el)
    //console.log(elements)

    for (i = 0; i < elements.length; i++) {

        console.log(elements[i])
        document.write(elements[i])
        //elements[i].style.backgroundColor = colorBg
    }

}

HTML

<div class="container">
<div class="element bg"></div>
</div>
<input type="button" value="Add Block" id="addEl"/>

CSS

html, body{
    height:80%;
}

.container{
    width:100%;
    height:100%;
}

.element{
    width:100px !important;
    height:100px;
}

Answer 1

不要使用document.write()。相反，使用 document.createElement() 创建 HTML 元素，然后将它们附加到其他元素。

您也可以只设置它们的颜色并在创建元素时附加它们一次。每次单击按钮时，无需为所有元素执行所有操作。

如果您想在每次按下按钮时随机化每个元素的颜色，您可以改为选择所有元素，遍历它们，然后以这种方式随机化它们的颜色。

document.getElementById("addEl").onclick = () => {
    var el = document.createElement("div");
    el.className = ["element bg"];
    var colorBg = '#' + (Math.random() * 0xFFFFFF << 0).toString(16)
    el.style.backgroundColor = colorBg
    document.getElementById("container").append(el)

}

html, body{
    height:80%;
}

#container{
}

.element{
    width:100px !important;
    height:100px;
    margin:10px;
    border:1px solid black;
}

<div id="container">
</div>
<input type="button" value="Add Block" id="addEl"/>