Круговая смена картинок при нажатии на одну и ту же кнопку, с изменением текста этой кнопки на JS

Question

Хочу менять картинки по нажатию на текст, который будет меняться при этом в соответствии со сменой картинки.

Понимаю, что должна быть переборка массива с флагом, который обозначает, что когда он равен 0, например, то текст и картинку ставим определённые. равен 1 - другие. Так должно быть циклично. Как это сделать?

есть отдельный код, работающий со сменой текста и почти работающий со сменой картинки, но не пойму, как их объединить.

Надо, чтоб была одна функция, делающая клик, вызывающая 2 других функции?

Смена картинок:

var i = 0;
var image = document.getElementById("image");
var imgs = new Array('img2.png', 'img1.png');

function imgsrc() {
  if (i == 2) {
    i = 0
  }
  image.src = imgs[i];
  i++;
}

<img id="image" src="img1.png" onClick="imgsrc();" width="160px">

и смена слов:

const btn = document.querySelector('.btn');
const textSamples = ['BLACK', 'WHITE'];
let textSampleIndex = 0;
const setNextText = () => {
  btn.innerText = textSamples[textSampleIndex++];
  if (textSampleIndex > textSamples.length - 1) {
    textSampleIndex = 0;
  }
};
btn.addEventListener('click', setNextText);

Answer 1

Для начала я бы посоветовал вынести переключатель в отдельный объект, что-то вроде:

const imageSwitcher = {
    allImages: [
        {
            src: 'img1.png',
            text: 'WHITE',
        },
        {
            src: 'img2.png',
            text: 'BLACK',
        },
    ],
    currentImageIndex: 0,
};

Затем объединяем то, что написано у вас выше в одну функцию, примерно так:

function switchImage() {
    const { allImages, currentImageIndex } = imageSwitcher;
    const { length } = allImages;

    const element = document.querySelector('.btn1');
    const image = document.getElementById('image');

    const nextImageIndex = currentImageIndex < length - 1
        ? (currentImageIndex + 1)
        : 0;
    
    imageSwitcher.currentImageIndex = nextImageIndex;

    const { src, text } = allImages[nextImageIndex];

    image.src = src;
    element.innerText = text;
}

Ну и, собственно, останется только повесить эту ф-ю на нужный элемент.

БЛОГ НА HUSL

Круговая смена картинок при нажатии на одну и ту же кнопку, с изменением текста этой кнопки на JS

Ответы (1 шт):