Хочу менять картинки по нажатию на текст, который будет меняться при этом в соответствии со сменой картинки.
Понимаю, что должна быть переборка массива с флагом, который обозначает, что когда он равен 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);