Галерея с миниатюрами

[Antonjrjr]

Ребята SOS ! пытаюсь сделать галерею с миниатюрами изображений без всяких плагинов на чистом js , написал вот такой вот код , но при нажатии на миниатюры ничего не происходит и выдает ошибку "Uncaught TypeError: Cannot read property 'length' of undefined". Помогите

<div class="content">
        <div class="gallery__wrapper">
            <div class="image-main__wrapper">
                <div class="arrows">
                    <div class="arrowleft"><img src="images/left.jpg"/></div>
                    <div class="arrowright"><img src="images/right.jpg"/></div>
                </div>
                <img class="image-main" src="images/fullsize/1.jpg">
                <div class="image-thumbnails__wrapper">
                    <ul class="thumbnails">
                        <li><img id="thumb-1" class="gallery__img" src="images/thumbs/1.jpg" data-full-url="images/fullsize/1.jpg"/></li>
                        <li><img id="thumb-2" class="gallery__img" src="images/thumbs/2.jpg" data-full-url="images/fullsize/2.jpg"/></li>
                        <li><img id="thumb-3" class="gallery__img" src="images/thumbs/3.jpg" data-full-url="images/fullsize/3.jpg"/></li>
                        <li><img id="thumb-4" class="gallery__img" src="images/thumbs/4.jpg" data-full-url="images/fullsize/4.jpg"/></li>
                        <li><img id="thumb-5" class="gallery__img" src="images/thumbs/5.jpg" data-full-url="images/fullsize/5.jpg"/></li>
                        <li><img id="thumb-6" class="gallery__img" src="images/thumbs/6.jpg" data-full-url="images/fullsize/6.jpg"/></li>
                        <li><img id="thumb-7" class="gallery__img" src="images/thumbs/7.jpg" data-full-url="images/fullsize/7.jpg"/></li>
                        <li><img id="thumb-8" class="gallery__img" src="images/thumbs/8.jpg" data-full-url="images/fullsize/8.jpg"/></li>
                        <li><img id="thumb-9" class="gallery__img" src="images/thumbs/9.jpg" data-full-url="images/fullsize/9.jpg"/></li>
                        <li><img id="thumb-10" class="gallery__img" src="images/thumbs/10.jpg" data-full-url="images/fullsize/10.jpg" /></li>
                        <li><img id="thumb-11" class="gallery__img" src="images/thumbs/11.jpg" data-full-url="images/fullsize/11.jpg"/></li>
                        <li><img id="thumb-12" class="gallery__img" src="images/thumbs/12.jpg" data-full-url="images/fullsize/12.jpg"/></li>
                        <li><img id="thumb-13" class="gallery__img" src="images/thumbs/13.jpg" data-full-url="images/fullsize/13.jpg"/></li>
                        <li><img id="thumb-14" class="gallery__img" src="images/thumbs/14.jpg" data-full-url="images/fullsize/14.jpg"/></li>
                    </ul>
                </div>
            </div>
        </div>[JS]     function clickOnThumbnail(event) {
            imagemain.src = event.target.dataset.fullUrl;
        }
        for (var i = 0; i < thumbnails.length; i++) {
            thumbnails[i].addEventListener('click', clickOnThumbnail);
        }
        var thumbnails = Array.prototype.slice.call(document.querySelectorAll('.gallery__img'))
        function clickOnThumbnail(event) {
            imagemain.src = event.target.dataset.fullUrl;
            var indexOfImage = thumbnails.indexOf(event.target);
            console.log(indexOfImage);
        }[/JS]

[рони]

Antonjrjr,
сначала присвоить переменной значение, и только потом его использовать!!! а не наоборот.

<script>
        var thumbnails = Array.prototype.slice.call(document.querySelectorAll('.gallery__img'));
        function clickOnThumbnail(event) {
            document.querySelector('.image-main').src = this.dataset.fullUrl;
        }
        for (var i = 0; i < thumbnails.length; i++) {
            thumbnails[i].addEventListener('click', clickOnThumbnail);
        }
</script>

[Antonjrjr]

Спасибо !