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

[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"] 
];

// размещаем картинки 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 убрать

[Vahan60]

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

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
    }
});

[рони]

img.display

что это?

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

нет, нужен индекс, нужна переменная или атрибут где будет хранится индекс.

Я получил два вида фрагмента кода. Оба работают.

???!!!

[рони]

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)
});

[Vahan60]

что это?

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

???!!!

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

[Vahan60]

нет, нужен индекс, нужна переменная или атрибут где будет хранится индекс.

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

[рони]

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

да

[рони]

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

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

[Vahan60]

да

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