The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Go back button on html page
rzaruvne
post Apr 10 2024, 09:04 AM
Post #1





Group: Members
Posts: 1
Joined: 10-April 24
Member No.: 29,163
I want to add a button next to the "Inciar" button so that when the user clicks, it returns to the last div page visited. I've tried but without success, seems to work only to go back to main page content.

CODE
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculadora de movimentação de rede</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        main {
            text-align: center;
        }

        .page {
            display: none;
        }

        .page.active {
            display: block;
        }

        button {
            background-color: #4CAF50; /* Green shade */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 8px;
        }

        button:hover {
            background-color: #45a049; /* Darker green shade on hover */
        }
    </style>
</head>

<body>
    <main>
        <h1>Calculadora de movimentação de rede</h1>
        <button onclick="showPage('Prestador')">Iniciar</button>

        

        <div id="Prestador" class="page">
            <h2>Para qual tipo de prestador deseja realizar a movimentação?</h2>
            <button onclick="showPage('Hospitalar')">Hospitalar</button>
            <button onclick="showPage('Não Hospitalar')">Não Hospitalar</button>
        </div>

        <div id="Hospitalar" class="page">
            <h2>Qual tipo de movimentação deseja realizar?</h2>
            <button onclick="showPage('HI')">Inclusão</button>
            <button onclick="showPage('HE')">Exclusão</button>
            <button onclick="showPage('HA')">Alteração</button>
            <button onclick="showPage('HV')">Vinculação</button>
        </div>

        <div id="Não Hospitalar" class="page">
            <h2>Qual tipo de movimentação deseja realizar?</h2>
            <button onclick="showPage('NHI')">Inclusão</button>
            <button onclick="showPage('NHE')">Exclusão</button>
            <button onclick="showPage('NHA')">Alteração</button>
            <button onclick="showPage('NHV')">Vinculação</button>
        </div>

    <div id="HI" class="page">
            <h2>O prestador é rede direta?</h2>
            <button onclick="showPage('')">Sim</button>
            <button onclick="showPage('')">Não</button>
        </div>

    </main>

    <script>

        function showPage(pageId) {
            var pages = document.querySelectorAll('.page');
            pages.forEach(page => {
                if (page.id === pageId) {
                    page.classList.add('active');
                    lastVisitedPageId = pageId; // Update lastVisitedPageId
                                    } else {
                    page.classList.remove('active');
                }
            });
        }

    </script>
</body>

</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 10 2024, 02:00 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,663
Joined: 10-August 06
Member No.: 7
QUOTE(rzaruvne @ Apr 10 2024, 04:04 PM) *

I want to add a button next to the "Inciar" button so that when the user clicks, it returns to the last div page visited.

Then the script needs to know the last DIV "page" the user visited, perhaps you could store its ID in a variable.

Or even better, you could make an array of all previously visited page IDs, which is incremented with the latest ID everytime the function is run. Then the user can go back several DIVs.

This "browser history" will of course disappear when the user leaves the pages, unless you store it in a cookie or similar.

QUOTE
<div id="Não Hospitalar"

Note that IDs must not contain whitespace, according to the HTML5 spec.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 30th April 2024 - 11:26 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC