JavaScript IntersectionObserverについて

Question

JavaScriptでスクロールして画面内に画像が入ったらイベントを起こすようなものを作ってます
1つ目の画像読込されたときには、うまくできますが、同じクラスを持った2つ目は無反応となります

同じクラスを持った複数の画像に反応させるにはどうしたらいいのでしょうか？
詳しい方お願いいたします

<style>
#space {
background-color:aqua;
height:130vh;
}
</style>

<div id="space"></div>

<img class="target" src="https://lohas.nicoseiga.jp/thumb/2716331i?">

<div id="space"></div>

<img class="target" src="https://lohas.nicoseiga.jp/thumb/2716331i?">


<script>
var options = {
threshold:1
};
const observer = new IntersectionObserver((entries) => {

if (entries[0].intersectionRatio != 0) {
    alert(entries[0]);
}
}, options);

observer.observe(document.querySelector('.target'));
</script>

Answer 1

observer.observe(document.querySelector('.target'));

querySelector()では要素を1つしか返さないので、
複数ならquerySelectorAll()を使います。

Document.querySelector()
Document.querySelectorAll()

===追記===
そしたら、querySelectorAll() の要素に対し、
for文でもmapでもいいので、ループで1つ1つobserver.observe()に渡してあげてください。
同じコールバックで良い場合は、同じobserverの使い回しでOKです。

Comments

[退会済みユーザー]

ご指摘ありがとうございます
observer.observe(document.querySelectorAll('.target'));
上記にしたところ、完全無反応となってしまいましたが、何がまずいんでしょうか

[退会済みユーザー]

すみません、その辺足りてませんでしたので追記しました。
一度に全部ではなく、1つ1つ渡してください。

[退会済みユーザー]

こういうことでしょうか？
1個目は反応してますが、2個目は反応してないです

<script>
var options = {
threshold:1
};
a=document.querySelectorAll('.target');
c=a.length-1;

const observer = new IntersectionObserver((entries) => {

if (entries[0].intersectionRatio != 0) {
alert(entries[0]);
}
}, options);
for(i=0;i<c;i++){
observer.observe(a[i]);
}
</script>

[退会済みユーザー]

for(i=0;i<c;i++){
を
for(i=0;i<=c;i++){
に訂正しました

[退会済みユーザー]

無事動きました。
ありがとうございました！