クリックして取得した要素を配列にしたいです

■やりたいこと
クリックした要素の色を取得して、それを配列にしたいです。
現状console.log(targetColors);で見ると
rgb(255, 255, 255)
rgb(170, 170, 170)
rgb(85, 85, 85)
rgb(0, 0, 0)
こうなるが、これを
colors = [rgb(255, 255, 255),rgb(170, 170, 170),rgb(85, 85, 85),rgb(0, 0, 0)
]
こうなるようにしたいです。

■問題点
これをするやり方が分からないです。
const colors = [];
colors.push(targetColors);
これを試してみましたがうまくいきませんでした。

html
1<div class="palette-item__wrapper">
2          <div class="palette-item" style="background-color: rgb(255, 255, 255);"></div>
3          <div class="palette-item" style="background-color: rgb(170, 170, 170);"></div>
4          <div class="palette-item" style="background-color: rgb(85, 85, 85);"></div>
5          <div class="palette-item" style="background-color: rgb(0, 0, 0);"></div>
6        </div>

js
1
2const paletteItemWrapper = document.querySelectorAll('.palette-item__wrapper');
3
4paletteItemWrapper.forEach((div, index) => {
5  
6  div.addEventListener('click',openPaletteItem);
7});
8
9function openPaletteItem(e) {
10  
11 const paletteItemPare = e.target.parentElement;
12  const paletteItemChild = paletteItemPare.children;
13  
14  for (const div of paletteItemChild) {
15    const targetColors = div.style.backgroundColor;
16    const colors = []
17    colors.push(targetColors); 
18  }
19  
20}

行動規範の内容に同意します

回答1件

ベストアンサー

以下のコードではfor内の各ループで毎回初期化してしまっているので、配列に要素を次々に追加していく事ができていません。(毎回初期化するので追加したものが消えてしまっています)

javascript
1  for (const div of paletteItemChild) {
2    const targetColors = div.style.backgroundColor;
3    const colors = []
4    colors.push(targetColors); 
5  }

以下のように初期化はループの前に1度行うようにしてください。

javascript
1  const colors = []
2  for (const div of paletteItemChild) {
3    const targetColors = div.style.backgroundColor;
4    colors.push(targetColors); 
5  }