мой скрипт js не меняет мою фотографию src

Question

Я хотел бы добавлять изображения динамически и иметь слайдер изображений. Я написал какой-то скрипт, и в консоли я вижу изменение sr c, но в HTML все еще остается одна картинка. Вот код:

HTML:

<div class="sliderItau">
   <a class="prevButton"> <img alt="prevButton" src="/images/prev.png"></a>
   <div class="jcarousel">
     <img id="image" src="/images/debito/itau_tela_02.png" alt=""></div>
   <a class="nextButton"><img alt="nextButton" src="/images/next.png"></a>
</div>

JS:

const images = []

let slideIndex = 1

function preload_images() {

    var image = new Image()
    image.src = 'images/debito/itau_tela_01.png'
    images[0] = image
    image = new Image()
    image.src = 'images/debito/itau_tela_02.png'
    images[1] = image
    image = new Image()
    image.src = 'images/debito/itau_tela_03.png'
    images[2] = image

}

preload_images()

const showSlidesItau = function (n) {
    let img = document.getElementById('image')
    let slides = img.src
    slides = images[slideIndex].src
    console.log(slides)
    console.log(images[slideIndex].src)
    if (n > slides.length) {
        slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }
}

const plusSlides = function (n) {
    console.log(slideIndex)
    showSlidesItau((slideIndex += n))
}

const next = document.querySelector('.nextButton')
const prev = document.querySelector('.prevButton')
//buttons ITAU
next.addEventListener('click', function () {
    plusSlides(+1)
})
prev.addEventListener('click', function () {
    plusSlides(-1)
})

Итак, каждый раз, когда я нажимаю кнопку назад или вперед мой sr c в цвете поменяны. Но не в HTML. Есть идеи, почему?

Answer 1

Я не JS -Pro, но я хотел указать на несколько вещей. Как GuyIncognito уже писал в комментариях, вы должны установить атрибут sr c напрямую, а не в скопированной переменной. Но в вашей функции showSlidesItau() есть еще несколько fl aws:

Проверяйте перед установкой источника изображения - не после

Если n или slideIndex находится вне диапазона индексов вашего массива изображений, вы все равно попытаетесь установить его и получите сообщение об ошибке.

Установите для параметра slideIndex значение n

В противном случае изображение изменится только тогда, когда вы находитесь в начале или в конце массива изображений ...

Индексы массива начинаются с 0 и заканчиваются array.length -1

Поэтому, если вы попробуете что-то вроде array [array.length], вы получите сообщение об ошибке.

Я попытался немного переписать функцию:

const showSlidesItau = function (n) {
  let img = document.getElementById("image");
  // First check the index
  if (n >= images.length) {
    slideIndex = 0;
  } else if (n < 0) {
    slideIndex = images.length - 1;
  } else {
    slideIndex = n;
  }
  // then set the src attribute
  img.src = images[slideIndex].src;
  console.log(images[slideIndex].src);
};

Надеюсь, я смогу вам немного помочь.