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元素，然后将它们附加到其他元素。

您也可以设置颜色，并在创建元素时将其追加一次。每次单击按钮时都无需为所有元素执行所有操作。

如果你想按下每个按钮上的每个元素的颜色随机化，你可以选择所有元素，迭代它们，并按照这种方式随机化它们的颜色。

＆＃13;

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

＆＃13;

html, body{
    height:80%;
}

#container{
}

.element{
    width:100px !important;
    height:100px;
    margin:10px;
    border:1px solid black;
}

＆＃13;

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

＆＃13;

Answer 2

为了给代码提供结构，将每个操作作为单独的函数是很好的。随机颜色字符串生成，新DOM元素构造（不显示它），主要操作。通过这种方式，可以轻松阅读代码：可以随时开始阅读并了解代码行正在做什么，而不必学习整个代码逻辑。

这里发生了什么。它以点击按钮开始，触发“click”事件，该事件具有绑定到它的函数addEl()。 addEl()将从createEl()获取一个新的DOM元素，将其置于container元素内，并将该元素推送到elements数组，如果其中某些其他功能不需要原来的问题。

function getColor() {
  return '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
}

function createEl(){
  var el = document.createElement("div");
  el.className = "element bg";
  el.style.backgroundColor = getColor();
  return el;
}

function addEl() {
  var el = createEl();
  container.appendChild(el);
  elements.push(el);
}
var container = document.getElementById("container");
var elements = [];

document
  .getElementById("addEl")
  .addEventListener('click', addEl)
;

html, body{
    height:80%;
}

#container{
    width:100%;
    height:100%;
}

.element{
    width:100px !important;
    height:100px;
    float:left;
}

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

Answer 3

您可以使用DOM方法创建元素，而不是使用document.write（）。不鼓励使用它。以下将完成您的工作：

＆＃13;

document.getElementById("addEl").addEventListener('click', () => {
  	 let container = document.querySelector('.container');
     let el = document.createElement("div");
     el.className = 'element bg';
     el.innerText = 'foo';
     el.style.backgroundColor = getRandomColor();
     container.appendChild(el);
});

function getRandomColor() {
 return '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
}

＆＃13;

html, body{
    height:80%;
}

.container{
    width:100%;
    height:100%;
}

.element{
    width:100px !important;
    height:100px;
}

＆＃13;

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

＆＃13;

Answer 4

这可以使用jquery

完成

    $(function () {
    var elements = []

var el = '<div class="element bg"></div>'
        $("#addEl").click(function () {
        
        var colorBg = '#' + (Math.random() * 0xFFFFFF << 0).toString(16)
 var el =     $("<div />",
{
    class: "element bg",
    css: {
        width: "20px",
        height: "10px",
        backgroundColor: colorBg
    }
});
         elements.push(el)
        $("#mycontainer").append(el);
            
        });

    })

html, body{
    height:80%;
}

.container{
    width:100%;
    height:100%;
}

.element{
    width:100px !important;
    height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="mycontainer">
<div class="element bg"></div>
</div>
<input type="button" value="Add Block" id="addEl"/>

单击数组的多个函数

4 个答案: