Доброго времени суток!
Пишу 'гирлянду' которая рандомно генерирует количество кружков. Изначально их бэкграунд пустой. На клик по кнопке, кружкам по очереди задаю цвет. И вот тут у меня проблема:
Кружки то генерирую, но почему-то последний имеет значение undefined, и цвета(которые тоже рандомно генерируються) применяються как раз к последнему елементу, а должны ко всем.
Подскажите где я прошляпил и что не так написал.
p.s. и как убрать цифровые значения с кружков=)?
'use strict';
const circles = [];
for (let i = 0; i <= 100; i++) {
circles[i] = i;
}
let circleWrapper = [];
let mainWrapper = document.getElementById('main-wrapper');
for (let i = 0; i <= circles.length; i++) {
let randomCircle = Math.floor(Math.random() * (100));
circles.splice(randomCircle, 1);
circleWrapper = document.createElement('div');
circleWrapper.classList.add('circle-body');
circleWrapper.innerHTML = circles[i];
mainWrapper.appendChild(circleWrapper);
}
const color = [generateColor()];
function generateColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16)
}
function changeColorBtn() {
for (let i = 0; i <= circles.length; i++) {
color[i] = generateColor();
circleWrapper.style = "background-color: " + color[i];
}
}
* {
padding: 0;
margin: 0;
}
body {
font-family: Calibri;
}
h1 {
text-align: center;
}
.main-wrapper {
width: 1000px;
margin: 0 auto;
}
.circle-body {
display: inline-block;
margin: 10px;
width: 20px;
height: 20px;
border: 2px solid #444444;
border-radius: 20px;
}
.btn-wrapper {
text-align: center;
}
.btn-wrapper button {
height: 40px;
width: 80px;
border-radius: 4px;
font-family: Calibri;
font-size: 20px;
color: white;
background: gray;
outline: none;
border: none;
transition: all 0.1s ease-in-out;
cursor: pointer;
}
.btn-wrapper button:hover {
background: dodgerblue;
box-shadow: 0px 0px 5px 0px rgba(176, 176, 176, 1);
}
.btn-wrapper button:active {
background: darkcyan;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Random</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Garland</h1>
<div id="main-wrapper">
</div>
<div class="btn-wrapper">
<button id="changeBtn" onclick="changeColorBtn()">Click</button>
</div>
<script src="script.js"></script>
</body>
</html>