Как создать шаги с проверкой?

Question

[syeta_126r]

Здравствуйте, у меня есть окно установки игры, оно должно содержать в себе 3 шага, 1 шаг задан при помощи html заранее, 2 шаг я сделал при нажатии на кнопку, то есть при нажатии мы меняем нужные элементы, но как сделать переход на 3 шаг я не знаю, пытался сделать проверку на уже имеющийся текст в блоке, но не получилось.

Не прошу полноценный код, хочу просто понять как это возможно реализовать, моих знаний увы не хватило

Сам блок в html

<div class="starter">
        <div class="starter-container">
            <div class="starter-box">
                <div class="starter-up">
                    <div class="starter-name">Инструкция по установке</div>
                    <div class="starter-number_sh">Шаг 1/3</div>
                </div>
                <div class="starter-bottom">
                    <div class="starter-process">Установка лаунчера</div>
                    <div class="starter-text">Запустите установочный файл лаунчера, после чего следуйте инструкциям по установке игры.</div>
                    <div class="starter-btn">Следующий шаг</div>
                </div>
            </div>
        </div>
    </div>

Переход на 2 шаг

document.querySelector('.starter-btn').addEventListener('click', function() {
    document.querySelector('.starter-process').textContent = "Загрузка игры";
    document.querySelector('.starter-number_sh').textContent = "Шаг 2/3";
    document.querySelector('.starter-text').textContent = 'В лаунчере нажмите кнопку "Играть", после чего дождитесь установки игры на ваш компьютер.';
});

Comments

[szQocks]

для отслеживания шага, тебе хватит простой переменной
и при перерисовке просто проверяешь её значение и отрисовываешь тот или инной контент

[Сергей delphinpro]

Оно того не стоит. Просто напиши текстовый файл с инструкцией.
Ну или картинку, если хочется выпендрится.

Answer 1

[dxtintx]

Хоть я и согласен с комментарием куратора тега, но все же если хочеться:
При нажатии на кнопку шаги идут как карусель, так что вместо i = 1 можешь что то другое поставить.

let i = 2;
      let instructions = [
        {
          process: "Установка лаунчера",
          text: "Запустите установочный файл лаунчера, после чего следуйте инструкциям по установке игры."
        },
        {
          process: "Загрузка игры",
          text: "В лаунчере нажмите кнопку \"Играть\", после чего дождитесь установки игры на ваш компьютер."
        },
        {
          process: "Процес 3",
          text: "Текст 3"
        }
      ];
      document.querySelector('.starter-btn').onclick = () => {
          if (i > instructions.length) { i = 1 };
          document.querySelector('.starter-process').textContent = instructions[i-1].process;
          document.querySelector('.starter-number_sh').textContent = `Шаг ${i}/3`;
          document.querySelector('.starter-text').textContent = instructions[i-1].text;
          i++
      };