Два клика по кнопке
 

Доброго времени суток.
Такая проблема - хочу, чтобы по клику на кнопку картинки менялись, а по повторному клику все возвращались на свои места.
Первый клик и первый обмен происходят штатно.
А вот повтор не работает.
Почему? Что не так делаю?

const colors = [
        ["colo/colZ1/Path_0.png", "colo/colZ2/Path_0.png"], 
	["colo/colZ1/Path_1.png", "colo/colZ2/Path_1.png"], 
	["colo/colZ1/Path_2.png", "colo/colZ2/Path_2.png"], 
	["colo/colZ1/Path_3.png", "colo/colZ2/Path_3.png"] 
];

// размещаем картинки 1-ой группы по местам при запуске сайта

let img = document.querySelectorAll(".img") 
for (let i = 0; i < colors.length; i++) {
    img[i].src = colors[i][0];
	img.display
    };

// меняем картинки на 2-ую группу на местах по клику на bttn

let bttn = document.querySelector (".bttn");  // меняем картинки на местах 
bttn.addEventListener ("click", function () {
  for (let i = 0; i < colors.length; i++) {
    img[i].src = colors[i][1];
	img.display
    };
});

// а вот обратного действия ( смена картинок 2-ой группы на картинки 1-ой группы по клику по той же bttn) не происходит

bttn.addEventListener ("click", function() {
  for (let i = 0; i < colors.length; i++) {
    img[i].src = colors[i][0];
	img.display
    };
});

Vahan60,
строка 21

img[i].src = colors[i].reverse()[0];

строку 28 убрать

Работает. Спасибо огромное.
И сразу же два вопроса-уточнения.

1. Можно ли этот же принцип применить, если необходимо будет менять 3 и более групп картинок?

2. Я получил два вида фрагмента кода. Оба работают.
И все же - какой из них правильней/надёжней?

let bttn = document.querySelector (".bttn");

bttn.addEventListener ("click", function () {
  for (let i = 0; i < colors.length; i++) {
    img[i].src = colors[i].reverse()[0];
	img.display
    };
	
});

for (let i = 0; i < colors.length; i++) {
    img[i].src = colors[i][0];
    img.display
    };

let bttn = document.querySelector (".bttn");

bttn.addEventListener ("click", function () {
  for (let i = 0; i < colors.length; i++) {
    img[i].src = colors[i].reverse()[0];
	img.display
    };
	
  for (let i = 0; i < colors.length; i++) {
    img[i].src = colors[i][0];
    img.display
    }
});

что это? нет, нужен индекс, нужна переменная или атрибут где будет хранится индекс.
???!!! :blink:

Vahan60,

const colors = [
        ["colo/colZ1/Path_0.png", "colo/colZ2/Path_0.png"],
	["colo/colZ1/Path_1.png", "colo/colZ2/Path_1.png"],
	["colo/colZ1/Path_2.png", "colo/colZ2/Path_2.png"],
	["colo/colZ1/Path_3.png", "colo/colZ2/Path_3.png"]
];
const img = document.querySelectorAll(".img");
const bttn = document.querySelector(".bttn");
const len = colors[0].length;
let index = 0;
const changeSrc = index => colors.forEach((arrSrc, k) => img[k].src = arrSrc[index]);

changeSrc(index);

bttn.addEventListener ("click", function () {
index = ++index % len;
changeSrc(index)
});

Как оказалось - лишняя деталь.

Ну я же выше привел оба варианта.

Я так понимаю, в ответе #5 именно такой код написан?

да

второй вариант очень странный :) масло масляное

Уфф.
Вроде разобрался.
Спасибо.