JSで全ての子要素を取得して、どの子要素をクリックしてもボタンの色を変えたいです

1-5の評価したら、postが青色になってほししいです。レールズを使っていて、星のimgのclssの指定ができないので、imgの親要素から子要素を指定して、どれかを押したら、postを青くしたいです。しかし、1個目の星を押した時にしか、ボタンが青くなりません。

  var stars = document.querySelector('#score img');
  var btn = document.querySelector('.btn-primary');
  stars.addEventListener('click',function(){
    btn.style.backgroundColor = 'blue';
  });

すみません、助けていただいたら嬉しいです。

yambejp

2021/03/28 12:04

評価部分のHTMLの例示が必要です

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

回答1件

ベストアンサー

javascript
1<script>
2document.addEventListener('click',e=>{
3  if(e.target.closest('#score img')){
4    let btn = document.querySelector('.btn-primary');
5    btn.style.backgroundColor = 'blue';
6  }
7});
8</script>
9<button class="btn-primary">button</button>
10<div id="score">
11<img alt="1">
12<img alt="2">
13<img alt="3">
14<img alt="4">
15<img alt="5">
16</div>