Javascript 创建新框而不是覆盖
我正在尝试用Javascript添加许多框。但是,它没有添加多个框,而是替换了第一个框。理想情况下,我希望这样做:(1)单击“下一步”生成颜色(2)单击“保存”将在下面创建一个框并显示选定的颜色(3)重复创建一个新框,同时保留先前的框 HTML:Javascript 创建新框而不是覆盖,javascript,html,Javascript,Html,我正在尝试用Javascript添加许多框。但是,它没有添加多个框,而是替换了第一个框。理想情况下,我希望这样做:(1)单击“下一步”生成颜色(2)单击“保存”将在下面创建一个框并显示选定的颜色(3)重复创建一个新框,同时保留先前的框 HTML: 只需使用appendChild方法将新节点添加到颜色框的特定容器中 saveButton.addEventListener("click", function(){ // new node var colorBox = document
只需使用
appendChild
方法将新节点添加到颜色框的特定容器中
saveButton.addEventListener("click", function(){
// new node
var colorBox = document.createElement('div');
// color
colorBox.style.background = currentColor;
// append into box container
boxContainer.appendChild(colorBox);
});
请参阅此处的完整示例-似乎没有任何添加按钮的代码…它位于HTML中,id为nextColor。上面的代码成功生成并显示随机颜色,并将其保存并显示到下面的框中。问题是,一旦我去尝试保存另一种颜色,它就会替换最初的颜色。如上所述,似乎没有任何代码添加按钮。。。
var colorDisplay = document.getElementById("displayColor");
var nextButton = document.getElementById("nextColor");
var saveButton = document.getElementById("saveColor");
var storedColors = []
var addNewBox = document.getElementsByClassName("savedColorBoxes")
nextButton.addEventListener("click", function(){
currentColor = randomColor()
displayColor.style.background = currentColor;
storedColors.push(randomColor());
return currentColor
});
saveButton.addEventListener("click", function(){
for(i = 0; i < addNewBox.length; i++){
// Add Box
addNewBox[i].classList.add("savedColorsBox")
// Update Color of the box to chosen
addNewBox[i].style.background = currentColor
}
});
function randomColor(){
//pick a "red" from 0 - 255
var r = Math.floor(Math.random() * 256);
//pick a "green" from 0 -255
var g = Math.floor(Math.random() * 256);
//pick a "blue" from 0 -255
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + ", " + g + ", " + b + ")";
}
body {
margin: 0;
background-color: black;
}
h1 {
text-align: center;
color: white;
}
#displayColor {
height: 420px;
background-color: rgb(232, 50, 120);
margin: 0 auto;
}
#container {
margin: 0 auto;
margin-bottom: 83.88px;
text-align: center;
background-color: white;
height: 79.88px;
border: 2px solid white;
}
/*button {
border: none;
background: none;
outline: none;
font-size: 1.0em;
}*/
#controls {
margin-top: 29.44px;
}
#nextColor {
margin-left: 200px;
}
#previousColor {
margin-right: 200px;
}
#saveColor {
text-align: center;
}
.savedColorsBox {
height: 100px;
width: 70%;
margin: 0 auto;
margin-top: 20px;
background: yellow;
}
p {
margin-top: 5%;
margin-left: 15%;
width: 102.3px;
letter-spacing: 1px;
font-weight: 800;
border-bottom: 1px solid;
color: white;
}
.currentColor {
background: black;
}
saveButton.addEventListener("click", function(){
// new node
var colorBox = document.createElement('div');
// color
colorBox.style.background = currentColor;
// append into box container
boxContainer.appendChild(colorBox);
});