ボタン一つでHTML要素の一部分を配列の内に指定した色にランダムで変更できるシステムを作成したい

Question

ある一部分のHTML要素（.head__up#targe）を、ボタンを押したらランダムで色が変更できるようにしたいです。必ず守るべき使用として、色変えの要素はCSSに記述した値を使用するのではなく、配列内にあるカラー要素を選択してランダムで色が変わるように実装したいと考えています。
最終的に、入力したカラーからランダムに値が表示されるようにしたいため、上記のやり方でおこなっております。
もし、分かる方や私のコードを修正できる方が見えましたら、ご教授の程、宜しくお願い致します。

コード
.warp
  .bodies
    .head
      .head__up#target{style: "white"} 
      .head__down
    %form
      %input{:type => "button", :value => "更新"}/
    .post
      = link_to "新規登録", new_product_path, class: "btn-default btn-gray"

JSに関しては、検証を行うと.addEventListenerでnullと表示されます

コード

document.querySelector('button').addEventListener('click', () => {
  const targetNode = document.getElementById('target');

if (targetNode.style.contains('white') === true) {
  targetNode.style.remove('white');
} else {
  var colors = new Array(
    "yellow",
    "red",
    "blue",
    "green",
    "black",
    "brown",
    "gray",
    "orange",
    "purple",
    "white");
    var index = Math.floor(Math.random() * colors.length);
    targetNode.style.add = colors[index];
  }
});
  

CSSのコードは必要ないですが、一応掲載させて頂きます

コード
.warp{
  background-color: #f6f6f6;
  min-width: 650px;
}
.bodies{
  margin: 30px auto 0;
  background-color: #fff;
  height: 600px;
  width: 70%;
  overflow: scroll;
 
}

.head{
  border-bottom: 1px solid #f6f6f6;
  align-items: center;
  display: flex;
  flex-direction: column;
 
}      
.head__up{
　display: inline-block;
　width: 100px;
　height: 50px;
　border-radius: 50% / 100% 100% 0 0;
  border:1px #000000;
  border-style: solid; border-width: thin;
}
#target{
  background-color: white;
}

.head__down{
　display: inline-block;
　width: 100px;
  height: 50px;
　border-radius:50%/ 0 0 100% 100%; 
　background: #F0DDC3;

}

Answer 1

Haml （ですよね？）は詳しくないのですが、 {style: "white"} では想定通りにならないのでは？
バックグラウンドがたまたま白だから白に見えているだけだと思います。
{style: "background-color: white"} ではないでしょうか。

targetNode.style.add = colors[index];

ではなく

targetNode.style.backgroundColor = colors[index];

でどうでしょう。

あと蛇足ですが new Array( ... ) は使わず [ ... ] とした方がよいです。
new Array は引数によって挙動が変わることがあるため、仕様を理解していないと思わぬバグを生みます。

---

JSに関しては、検証を行うと.addEventListenerでnullと表示されます

これは document.querySelector('button') が null になっているということでしょうか？
であればどこかに %button を置けばよいかと。
既にボタン設置済みなら document.addEventListener('DOMContentLoaded', func) として、DOM構築を待ってください。

Comments

[Kengo_jeb]

無事に解決しました！
ありがとうございました！