如何实现点击按钮时用JavaScript为新创建的Div添加当前背景色？

需求说明 #

点击“Click Me”按钮时：

• 页面背景色、颜色名称文本、按钮背景色从颜色数组随机切换，不会连续重复同一种颜色
• 每次点击添加一个新方块，新方块继承点击瞬间的当前背景色，旧方块保留原有颜色

原代码问题分析 #

1. 使用重复的id="test"，document.getElementById('test')只能选中第一个元素，导致后续方块颜色无法正确设置
2. 递归调用samecolor()可能引发栈溢出风险
3. 方块颜色设置逻辑依赖重复id，无法精准给新方块赋值

修改后的完整代码 #

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css"> 
    <title>Color Switcher</title>
</head>
<body>
    <div id="bgcolor">
    <h1>Background Color : <span id="color">Lightgray</span></h1>
    </div>
    <button id="click">click me</button>
    <div id="squares"></div>
    <script src="index.js"></script>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 100px;
}

h1 {
    font-size: 100px;
    color: white;
}

button {
    padding: .5em 1.5em;
    font-size: 60px;
    border: 7px solid black ;
    border-radius: 10px;
    font-weight: 700;
}

#bgcolor {
    background-color: black;
    padding: 1.5em 2em;
    border-radius: 30px;
}

#squares {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 添加间距提升美观度 */
}

/* 把id改为类，支持多个方块 */
.test {
    width: 150px;
    height: 150px;
    border: 3px solid white;
}

JavaScript

const colorChange = document.querySelector('#color');
const clickBtn = document.querySelector('#click');
const squaresContainer = document.querySelector('#squares');

const defaultBackground = 'lightgray';
const colors = ["red", "beige", "burlywood", "coral", "aqua", "darkcyan", "pink", "lawngreen", "fuchsia"];

// 初始化页面样式
document.body.style.backgroundColor = defaultBackground;
colorChange.textContent = defaultBackground[0].toUpperCase() + defaultBackground.substring(1);
colorChange.style.color = defaultBackground;
clickBtn.style.backgroundColor = defaultBackground;

clickBtn.addEventListener('click', function() {
    let ranColor;
    // 循环获取与当前背景色不同的随机颜色，避免递归栈溢出
    do {
        ranColor = colors[Math.floor(Math.random() * colors.length)];
    } while (ranColor === document.body.style.backgroundColor);

    // 更新页面元素颜色
    document.body.style.backgroundColor = ranColor;
    colorChange.style.color = ranColor;
    clickBtn.style.backgroundColor = ranColor;
    colorChange.textContent = ranColor[0].toUpperCase() + ranColor.substr(1);

    // 创建新方块并设置对应颜色
    const newSquare = document.createElement('div');
    newSquare.classList.add('test');
    newSquare.style.backgroundColor = ranColor;
    squaresContainer.appendChild(newSquare);
});

关键修改点 #

1. 替换重复id为类：将#test改为.test，避免id唯一性冲突
2. 优化颜色选择逻辑：用do-while循环替代递归，避免栈溢出风险
3. 精准设置方块颜色：使用createElement创建新元素，直接为其设置背景色后添加到容器，确保每个方块颜色正确
4. 添加方块间距：在CSS的#squares中加入gap:10px，提升视觉效果

内容的提问来源于stack exchange，提问作者Axnyc