addEventListenerが機能しない。
解決したいこと
addEventListenerが機能しない。
プログラミング初心者でjavascriptでスライドショーを実行しようとしています。
発生している問題・エラー
Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
該当するソースコード
--------------javascript--------------
{
const thumbnails = document.querySelectorAll('.thumbnail');
const mainImage = document.getElementById('main-img');
thumbnails[1].addEventListener('click', () => {
thumbnails[0].classList.add('active');
thumbnails[1].classList.remove('active');
});
}
--------------html--------------
<div class="big-img">
<img src="https://github.com/matsuyas0120/buremen.Site/blob/main/head.jpg?raw=true" alt="#" id="mein-img" class="active">
<img src="img/head2.jpg" alt="">
<img src="img/head3.jpg" alt="">
<img src="img/head4.jpg" alt="">
<h1>居酒屋</h1>
<ul class="custom">
<li>
<i class="bi bi-caret-left"></i>
</li>
<li>
<i class="bi bi-circle" class="thumbnail"></i>
</li>
<li>
<i class="bi bi-circle" class="thumbnail"></i>
</li>
<li>
<i class="bi bi-circle" class="thumbnail"></i>
</li>
<li>
<i class="bi bi-circle" class="thumbnail"></i>
</li>
<li>
<i class="bi bi-caret-right"></i>
</li>
</ul>
</div>
--------------javascript--------------
.big-img img.active {
width: 100%;
height: 770px;
object-fit: cover;
display: block;
}
.big-img img {
display: none;
}
自分で試したこと
このサイトで掲載されていた同じような質問を見て解決を試みましたがわからず質問させてもらいました。
至らない点も多いかと思いますがご教示いただけますと幸いです。
0 likes
