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

Question

■やりたいこと
クリックした要素の色を取得して、それを配列にしたいです。
現状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);
これを試してみましたがうまくいきませんでした。

<div class="palette-item__wrapper">
          <div class="palette-item" style="background-color: rgb(255, 255, 255);"></div>
          <div class="palette-item" style="background-color: rgb(170, 170, 170);"></div>
          <div class="palette-item" style="background-color: rgb(85, 85, 85);"></div>
          <div class="palette-item" style="background-color: rgb(0, 0, 0);"></div>
        </div>

const paletteItemWrapper = document.querySelectorAll('.palette-item__wrapper');

paletteItemWrapper.forEach((div, index) => {
  
  div.addEventListener('click',openPaletteItem);
});

function openPaletteItem(e) {
  
 const paletteItemPare = e.target.parentElement;
  const paletteItemChild = paletteItemPare.children;
  
  for (const div of paletteItemChild) {
    const targetColors = div.style.backgroundColor;
    const colors = []
    colors.push(targetColors); 
  }
  
}

Answer 1

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

  for (const div of paletteItemChild) {
    const targetColors = div.style.backgroundColor;
    const colors = []
    colors.push(targetColors); 
  }

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

  const colors = []
  for (const div of paletteItemChild) {
    const targetColors = div.style.backgroundColor;
    colors.push(targetColors); 
  }

Comments

[cafe1111]

なるほど！
ご回答ありがとうございました！