Как изменить содержимое в кнопке при клике?

Question

[Игорь Мирошкин]

Добрый вечер, коллеги. Задача казалось бы простая, но что-то последнее время туплю. Есть три кнопки - 1, 2, 3. При клике на любую кнопку, содержимое кнопок должно меняться вот так - 2, 3, 1 и так по кругу. Если есть у кого догадки, подскажите пожалуйста.

Answer 1

[0xD34F]

const buttonSelector = 'button';
const getButtons = () => document.querySelectorAll(buttonSelector);

Вариант раз - делегируем обработку кликов по кнопкам их общему предку, копируем разметку, слева направо:

document.addEventListener('click', ({ target: t }) => {
  if (t.closest(buttonSelector)) {
    const buttons = getButtons();
    const html = Array.from(buttons, n => n.innerHTML);
    for (const [ i, n ] of buttons.entries()) {
      n.innerHTML = html[~-(i || html.length)];
    }
  }
});

Вариант два - обработчик клика назначаем кнопкам, переносим вложенные узлы, справа налево:

const buttons = getButtons();
const onClick = () =>
  buttons.forEach(function(n, i, a) {
    n.append(...(++i < a.length ? a[i].childNodes : this));
  }, [...buttons[0].childNodes]);

buttons.forEach(n => n.addEventListener('click', onClick));

Answer 2

[Никита Егоров]

Я скорее всего неправильно понял, но все же

Comments

[Игорь Мирошкин]

Благодарю Вас, Никита

Answer 3

[Stalker_RED]

Comments

[Никита Егоров]

numbers.push(numbers.shift())

хммм, точно )