There are three pages: the main (which could not load), the entrance and, in fact, your page. As you can see, the last two have a Back button, which, in theory, should return to the previous page. Those. from the Entrance to the Main, and from the Page to the Entry. But it works in such a way that from Page to Main, and this is not good. I was advised that this could be done with a stack, but it is very hard for me.

    1 answer 1

    It works like this ...

    // Создаем массив в который будем складировать историю переходов let historyArr = []; // Кнопки для управления переходами const pageSwitcher = document.getElementsByClassName('page-switcher'), pageBack = document.getElementsByClassName('page-back'); // Добавляем в историю стартовую страницу historyArr.push('page-0'); for(let switcher of pageSwitcher) { // Вешаем обработчик на кнопки перехода "вперед" (Например: Главная->Логин->Страница пользователя) switcher.addEventListener('click', function() { // Добавляем в конец массива новый "адрес" (в примере это аттрибут data-href) historyArr.push(this.dataset.href); console.log(historyArr); }); } // Вешаем обработчик на кнопку "назад" pageBack[0].addEventListener('click', function() { // Просто извлекаем значение из нашей "истории" // if( historyArr.length > 1 ) - так как нам не нужно, что бы стартовая страница удалялась из истории if( historyArr.length > 1 ) historyArr.pop(); console.log(historyArr); }); 
     <div class="main"> <button class="page-switcher" data-href="page-1">Page 1</button> <button class="page-switcher" data-href="page-2">Page 2</button> <button class="page-switcher" data-href="page-3">Page 3</button> <button class="page-switcher" data-href="page-4">Page 4</button> <button class="page-back">Back</button> </div>

    • Create an array with "transition history"
    • When a transition to a new page occurs, we add ( push ) it to the "history" (in this example, this value is stored in the data-href attribute of our button)
    • When we press "Back", we retrieve ( pop ) the last value (current page), as a result in our history array the last element ( historyArr[-1] ) becomes the "name of the previous page" and we are already guided by what we download / show.

    PS there would be an option "forward", then at extraction one more array would be required in which we would store the extracted "pages".

    PSS Although it is better to do it through History

    • I didn’t figure it out right away, but thank you very much) The tangled thing is Bipa
    • All you need to understand: array.push (value) adds a value to the array, array.pop () removes the last element of the array (you can do var el = array.pop (), then el will contain the removed item). In fact, you simply make a "map of your transitions", if you go to a new page, add the value of array.push (), if you go back, then "delete" the last value of array.pop (), and depending on what You current last value in the array determine what content on the page you display. - MedvedevDev
    • @ Bipach, and yes, if the answer helped and alternative solutions are not required, click the check mark in the upper left of the answer;) - MedvedevDev