onclickでクリック後の処理をしたいです。

onclickでクリック後の処理を行いたいのですがうまくいかず質問させていただきました。

現在、下記の様にfor文でHTMLを出力していて、for文の一つ目はクリック後の処理(クリックされた！の表示)がされるのですが、二つ目以降はクリックしても何の変化もなしです。

html
1            {% for list in lists %}
2            <div class="col-lg-4">
3                <div class="card">
4                    <div class="card-body">
5                        <p class="text-center">{{ list.name }}</p>
6                        <img alt="" src="{{ list.image.medium.url }}"/>
7                        <br>
8                        <p class="text-center">{{ list.content }}</p>
9                        <p class="text-center">有効期限:{{ list.deadline }}</p>
10                        <div id="text-button">
11                            <p id="text">クリック</p>
12                        </div>
13                    </div>
14                </div>
15            </div>
16            {% endfor %}
17<script>
18    document.getElementById("text-button").onclick = function() {
19    document.getElementById("text").innerHTML = "クリックされた！";
20    };
21</script>        
22

for文で行うときはjavascriptも何か変更させないといけないのでしょうか？
何かアドバイスいただきたいです。よろしくお願いいたします。

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

回答3件

そもそも、IDは重複不可です。

投稿2020/07/26 10:57

kyoya0819

総合スコア10429

ベストアンサー

asuchi0819さんがおっしゃっているように、同じid属性は1ページ内に一つしか存在してはいけないことになっています。

もし文法を無視して同一idの要素が文書内に複数存在する場合、getElementByIdは最初の要素を取得します。(element.id)
そのため、clickハンドラを追加する処理が最初の1つにしかされていないのです。

HTMLのボタンの部分を

<div class="text-button">
  <p class="text">クリック</p>
</div>

スクリプトを

<script>
  // text-buttonクラスを持つ要素の配列を取得、各要素をforEachでループ処理、elには各要素が順番にわたさ
  Array.from(document.getElementsByClassName("text-button")).forEach(function(el) {
    // 書き換え対象であるtextクラスを持つ要素を取得
    var iel = el.getElementsByClassName("text")[0];
    //  clickイベントのリスナーを設定
    el.addEventListener("click", function() {
      iel.innerText = "クリックされた！";
    });
  });
</script>

としてみてください。

class属性を使ってElementを取得する場合getElementsByClassNameメソッドを使います。Element**"s"**であることに注意してください。
getElementsByClassNameはHTMLCollectionを返します。HTMLCollectionはElementの配列のようなものです。
jsで配列の各要素にたいして何らかの処理を行う場合、forEachメソッドを使うのが一般的です。
しかし、HTMLCollectionはElementの配列のようなもので、厳密には配列ではありません。なのでforEachは使うことができません。
そこでArray.fromを使って、HTMLCollectionを配列に変換します。
よって、Array.from(document.getElementsByClassName("text-button"))は、documentからtext-buttonクラスを持つ要素のHTMLCollectionを取得し、それを配列に変換する = documentからtext-buttonクラスを持つ要素の配列を取得するという意味になります。
forEachメソッドには関数を渡します。渡した関数にはforEachによって配列の各要素が自動的に渡されます。(今回はtext-buttonクラスを持つElementが順番に1つずつ渡されます。これをelで受けています) 参考
書き換える対象となるtextクラスを持つ要素を、getElementsByClassNameで取得します。getElementsByClassNameはたとえ取得した要素が1つでもHTMLCollectionとして返すので、最初の要素[0]を取得します。
el(text-button)に対してイベントリスナーを設定します。この例の場合は、el.onclick = function(){...}でも問題ありませんが、この書き方ではtext-buttonのonclickに既に別のイベントリスナーが設定されていた場合、上書きしてしまいます。el.addEventListener("click", function(){...})を使うと、上書きすることなく追加することができます。