JavaScriptでclickが反応しない

Question

前提・実現したいこと

JavaScriptを用いて、解決ボタンをクリックしたら文字が赤くなるようにしたいです。
サイトなどを参考にコードを記述したのですが、何が間違っているのか分からないです。
（４行目でエラーが出ているとは思うのですが具体的にどこがおかしいのか検討がつきません...）

【イメージ画像（Gyazo）】
https://gyazo.com/2d7d47b45e19a9d56eafc25199684690

発生している問題・エラーメッセージ

【console】

Uncaught TypeError: goodAnswerButton.addEventListener is not a function
at good_answer.js:4

該当のソースコード

window.addEventListener("load", function(){ 
    const goodAnswerButton = document.getElementsByClassName('good-answer')

    goodAnswerButton.addEventListener('click', function(){
        goodAnswerButton.removeAttribute("style", "color:red;")
    })
})

【解決ボタンのあるページのビューファイル】

<div class="comment">
      <div class="comment-box">
      <%= form_with model:@response,url:comment_responses_path(@comment),local: true do |f| %>
        <%= f.text_area :response_text, placeholder: "質問する", class: "comment-text" %>
        <%# <%= hidden_field_tag :comment_id,@comment.id %>
      <p class="comment-warn">
        <p>他の生徒の質問で回答できる場合には積極的に回答してください！</p>
      </p>
      <br>
      <%= f.submit "質問する",class: "comment-btn"%>
      <div class="back-to-top2"><%=link_to '戻る', root_path %></div>
     <% end %>
  </div>

<div class="comment-box2">
      <h4 class="comment-list">＜質問一覧＞</h4>
      <% if @responses %>
        <% @responses.each do |response| %>
        <div class="comment-content2">
         <% if current_user.genre == "教員" %> 
          <p>
            <strong><%= link_to response.user.name, "#", class: "comment-nickname" %></strong>
          </p>
          <% elsif current_user.genre == "生徒" %>
          <strong class= "comment-nickname">匿名</strong>
          <% end %>
          <p class="comment-texts">
            <%= response.response_text %>
          </p>
            
          <ul class="comment-time">
            <p class="time"><%= response.created_at.to_s(:datetime_jp) %></p>
            <p class="time"><%= response.created_at.to_s(:datetime_jp2) %></p>
          </ul>
           <% if current_user.genre == "教員" %>
          <p>
            <%= link_to comment_response_path(@comment.id, response.id), method: :delete, class: "delete-button" do %>
            <i class="fas fa-trash"></i>
            <% end %>
          </p>
          <% elsif user_signed_in? && current_user.id == response.user_id %>
          <p>
            <%= link_to comment_response_path(@comment.id, response.id), method: :delete, class: "delete-button" do %>
            <i class="fas fa-trash"></i>
            <% end %>
          </p>
          <% end %>
          <p>
          <div class="good-answer" id="text-button"><p id="text">解決</p></div>
          </div>
        <% end %>
      <% end %>
    </div>
  </div>

【application.js】

require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../good_answer")
//= require jquery
//= require_tree .

Comments

[m.ts10806]

画像はteratailの画像アップロードを利用してください。
あと、実際のコード以外の情報は基本的にcode内に含めないようにしてください。
あと、コード的にはNode.jsのものかと思います。タグに追加願います。

Answer 1

非常によく出る質問です。
getElement"s"ByClassNameというメソッド名が示す通り、取得できる情報は単数ではなく複数です。

Document.getElementsByClassName()

指定されたクラス名をすべて持つすべての子要素の配列風オブジェクトを返します

const goodAnswerButton = document.getElementsByClassName('good-answer')
console.log(goodAnswerButton )

のようにするとどういう形で要素が取得できるか分かります。

このような「配列風オブジェクト」として取得された要素群に対してイベントを当てたい場合、取得後、ループを利用するなどして個々の要素にaddEventしていく必要があります。

Comments

[moto12]

丁寧にありがとうございました。
おかげで解決しました。
指摘して頂いた点、今後は気をつけます。

Answer 2

以下の通りfor文を用いて一つずつ値を取り出すことで解決しました。

window.addEventListener("load", function(){ 
    const goodAnswerButton = document.getElementsByClassName('good-answer')
    for (let i = 0; i < goodAnswerButton.length; ++i) { 
        goodAnswerButton[i].addEventListener("click", function(){
            goodAnswerButton[i].setAttribute("style", "background-color:#FFBEDA;")
        })
    }
})