JavaScriptのループでclickが機能しない

前提・実現したいこと

JavaScriptを用いて、解決ボタンをクリックしたら背景が赤くなるようにしたいです。
（５行目でエラーが出ているとは思うのですが具体的にどこがおかしいのか検討がつきません...）

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

【console】

Uncaught TypeError: goodAnswerButton.setAttribute is not a function
at HTMLDivElement.<anonymous> (good_answer.js:5)

該当のソースコード

Javascript
1
2window.addEventListener("load", function(){ 
3    const goodAnswerButton = document.getElementsByClassName('good-answer')
4    for (let i = 0; i < goodAnswerButton.length; ++i) { 
5        goodAnswerButton[i].addEventListener("click", function(){
6            goodAnswerButton.setAttribute("style", "background-color:#FFBEDA;")
7        })
8    }
9})

Ruby
1【解決ボタン部分】
2
3<div class="good-answer" id="text-button"><p id="text">解決</p></div>
4

Javascript
1【application.js】
2
3require("@rails/ujs").start()
4// require("turbolinks").start()
5require("@rails/activestorage").start()
6require("channels")
7require("../good_answer")
8//= require jquery
9//= require_tree .
10

m.ts10806

2020/11/07 09:34

解決したと思ってたのに・・・ https://teratail.com/questions/302842 ちゃんと理解して、問題が解決してから「解決済み」にするようにしてください。そして解決したら「どう解決したか」をコメントください。 https://teratail.com/help/question-tips#questionTips4-2 フィードバックも何もなしに解決済みにされると「本当に理解されたのか」が分かりません。

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

回答2件

getElementsByClassNameとfor文を一緒に使うことができないみたいです。以下のサンプルのようにquerySelectorAllを使用してみてはいかがでしょうか？

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Document</title>
7</head>
8<body>
9  <div class="good-answer" id="text-button">
10    <p id="text">解決</p>
11  </div>
12  <div class="good-answer" id="text-button">
13    <p id="text">解決</p>
14  </div>
15  <div class="good-answer" id="text-button">
16    <p id="text">解決</p>
17  </div>
18  <script>
19    window.addEventListener("load", () => {
20      // @see https://qiita.com/naos_taira/items/929f9bbf46d4f61819ac
21      const goodAnswerButtons = document.querySelectorAll('.good-answer')
22      goodAnswerButtons.forEach(button => {
23        button.addEventListener('click', () => {
24          button.setAttribute('style', "background-color:#FFBEDA;");
25        })
26      });
27    })
28  </script>
29</body>
30</html>

投稿2020/11/07 09:59

kuro3

総合スコア27

moto12

2020/11/07 10:10

ご回答して頂きありがとうございます！下に記述した方法で解決できました！ kuro3さんにご教授頂いた内容は、今後参考にさせて頂きます。ありがとうございました。

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

ベストアンサー

goodAnswerButtonは配列なので、要素番号を指定する必要があります。

diff
1window.addEventListener("load", function(){ 
2    const goodAnswerButton = document.getElementsByClassName('good-answer')
3    for (let i = 0; i < goodAnswerButton.length; ++i) { 
4        goodAnswerButton[i].addEventListener("click", function(){
5-           goodAnswerButton.setAttribute("style", "background-color:#FFBEDA;")
6+           goodAnswerButton[i].setAttribute("style", "background-color:#FFBEDA;")
7        })
8    }
9})