Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Dúvida. Criar botão para voltar ao estado anterior de uma página

por Vitor Kindrat
| 96.2k xp | 91 posts

Criei um botão para voltar ao ultimo estádo de uma página, tentei com window.location.href e com uma função que usa window.history.back. Porém quando eu uso qualquer uma dessas formas, ele volta um URL inteiro, o que me leva à pagina inicial. Eu queria voltar para o ultimo estado da página somente.

Aqui está o projeto no github https://github.com/vkindrat/vkindrat.github.io/tree/master/nome

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>IMC</title>
    <link rel="stylesheet"  href="css/imc.css">
</head>

<body>

<h1 class="titulo">Complete com seus dados</h1>

    <div class="div-principal">

        <p class="digite-peso">Seu peso</p>
    <input class="peso"></input>

        <p class="digite-altura">Sua altura</p>
    <input class="altura"></input>

        <p class="imc-resultado"></p>


    <div class="botoes">

    <button class="botao-calcula" onclick="calcula()">Calcular</button>

    <button class="botao-volta" onclick="volta()">Voltar</button>
    </div>


    </div>






<script src="js/imc.js">

</script>


</body>
</html>

JS





var peso = document.querySelector(".peso");
var altura = document.querySelector(".altura");
var texto = document.querySelector(".digite-altura");
var textodois = document.querySelector(".digite-peso")
var titulo = document.querySelector(".titulo");

var resultadoFinal = document.querySelector(".imc-resultado");
var botaoCalcula = document.querySelector(".botao-calcula");


function calcula(){

    var resultado = peso.value / (altura.value * 2)
            botaoCalcula.classList.add("esconde")
            peso.classList.add("esconde");
            altura.classList.add("esconde");
            texto.classList.add("esconde");
            textodois.classList.add("esconde");
            titulo.classList.add("esconde");



            resultadoFinal.textContent = "O seu IMC é " + resultado.toPrecision(3);

    console.log(resultado.toPrecision(4));
}



function volta(){

    window.history.back();
}
6 respostas
por Andre Tardelli
| 157.1k xp | 152 posts
Instrutor Instrutor e Coordenador na Alura

Oi Vitor!

Quando você diz voltar ao estado anterior, você quer dizer retornar os elementos da página como estavam da primeira vez que você iniciou a página? Se for o caso, você pode tentar atualizar a página, para retornar ao estado original da mesma.

Basta você colocar a função location.reload(); dentro da sua função de volta que ele irá atualizar a página na URL que você está e ela irá retornar ao estado inicial da mesma. Caso você queira uma solução mais elegante, você também pode tentar atribuir um valor nulo a esses inputs e remover a visibilidade da div que apresenta o IMC. Tudo depende da sua necessidade no momento.

Espero ter conseguido ter ajudado! Sucesso e bons estudos!

por Vitor Kindrat
| 96.2k xp | 91 posts

Oi André, acho que me expliquei mal rsrs, queria na verdade voltar ao último estado da página, não do jeito que ela estava na primeira vez.

Por exemplo, quando clico no botão voltar quando estou na página imc.html, ele volta pra first.html, pedindo o nome, ao invés de voltar para o ultimo estado da first.html, que era quando ela pedia, O que deseja fazer? Com as opções embaixo

por Andre Tardelli
| 157.1k xp | 152 posts
Instrutor Instrutor e Coordenador na Alura

Oi Vitor.

Acho que eu entendi o seu problema agora. Consegui resolver o seu problema utilizando o localStorage, que armazena um valor local na cache do seu navegador.

A ideia é armazenar o valor no input da primeira vez dentro da cache do seu navegador, e nas próximas vezes verificar se existe algum valor armazenado ali. Se tiver, ele executa a função de troca automaticamente com os valores armazenados e irá simular o 'último estado' da página!!

Segue o código com as alterações:

first.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/first.css">
    <title>nome</title>
</head>
<body>

<h1 id="titulo">Olá, qual é seu nome?</h1>
    <input id="campo"></input>
    <button id="botao" onclick = "troca(nome.value)">Click</button>
    <div class="opcoes">
        <h2>O que deseja fazer?</h2>
    </div>
    <div class="opcoes-2">
        <button onclick= "window.location.href = 'imc.html';">Calcular IMC</button>
        <button onclick="">Calculadora</button>
        <button onclick="">Cara ou Coroa</button>
        <button onclick="">Gire um Dado</button>
    </div
    <script>
        var nome = document.querySelector("#campo");
        var texto = document.querySelector("#titulo");
        var botao = document.querySelector("#botao");
        var opcoes1 = document.querySelector(".opcoes");
        var opcoes2 = document.querySelector(".opcoes-2");

        if(localStorage.getItem('nome')){
            troca(localStorage.getItem('nome'));
        }

        function troca(valor){
            texto.textContent = "Olá, " + valor;
            nome.classList.add("input-esconde");
            botao.classList.add("botao-esconde");
            localStorage.setItem('nome', valor);
            opcoes1.classList.remove("opcoes")
            opcoes2.classList.remove("opcoes-2")
        }
        console.log(texto);
    </script>
</body>
</html>

O único problema é que você terá que limpar a cache do seu navegador caso queira preencher o nome novamente, ou removê-lo na mão dentro do menu do developer tools. Mas creio que dessa forma já irá simular do jeito que você deseja. Tente desta forma e veja se funciona! Sucesso e bons estudos!

por Vitor Kindrat
| 96.2k xp | 91 posts

Testei e deu certo André, muito obrigado!!

Já aproveitou e tirou outra dúvida que eu tinha rsrs, que era validar o nome. Ele não estava pegando o nome.value pois quando eu chamava a função no onclick, eu não passava o parâmetro nome, e dava erro. Agora que você colocou o parâmetro ali resolveu esse meu problema.

Nesse problema que você apontou de não poder preencher o nome novamente, qual seria a melhor solução para isso? Agora estou querendo implementar um botão para voltar da página das opções, para a página do nome, porém ele da um erro de GET.

solução!
por Andre Tardelli
| 157.1k xp | 152 posts
Instrutor Instrutor e Coordenador na Alura

Oi Vitor!

Caso você queira alternar entre as duas páginas para retornar ao conteúdo original agora, o ideal seria você remover o localStorage antes de retornar à página. Nesse caso, você voltaria ao estado inicial de pedir o nome.

Você pode limpar o localStorage tanto manualmente ( ao pressionar F12, limpar na aba de Application no Devtools, por exemplo), ou dentro do código através da função localStorage.clear();.

Utilize isso para alternar entre as duas páginas HTML e retornar o conteúdo que você quer. Caso queira alterar o conteúdo diretamente em uma página só (alterar o conteúdo direto na first.html, por exemplo), tente implementar métodos de alternar a visibilidade dos elementos e limpar os valores que estejam impressos na tela.

Acho que por enquanto é isso. Sucesso e boa sorte na construção do seu projeto!!

por Paulo Scalercio
| 363.3k xp | 341 posts
Instrutor Instrutor & Desenvolvedor

Fala Vitor!

Fico feliz que tenha solucionado sua dúvida, estou fechando seu tópico agora.

Caso tenha uma nova questão, basta criar um novo tópico.

Abraços e bons estudos!