How to open an HTML document from fetch in the same tab?

Question

I’m creating a riddle site in which each riddle, the user must insert an answer on prompt and this reply will be sent to the server by POST request with the function fetch.

On the server side, the answer will be checked and if it is correct, I return a new HTML page containing a new puzzle. If the user’s response is wrong, the server returns the 403 code to say it was a wrong answer.

Already on the client side, I want to check whether the answer was right or wrong. If the answer is incorrect will be issued a alert and if the answer is right, I want the browser to render the new page sent by the server.

The problem is that I don’t know how to redirect the client to that page the server sent.

What I was doing before was writing the received text with the document.write, but there comes a time when it doesn’t work because the contents of the files accumulate on the page.

function sendAnswer(){

    const answer = prompt("Digite sua resposta:").toLowerCase();
    if(!answer){return;}

    fetch("/", {
        method: "post",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({answer: answer, fase: sessionStorage.fase})

    }).then(function(response){

        if (response.status != 200){
            alert("Resposta Errada!");
            return;
        }

        response.text().then(function(text){
            document.write(text);
        });
                    
    });
}

What I want is to change the content of the page completely by the HTML file received from the server. How can I do this ?

Answer 1

By this stretch:

What I was doing before was writing the received text with the document.write, but there comes a time when it doesn’t work because the contents of the files accumulate on the page.

I believe you were able to exchange the content of the page for the response of the asynchronous request. Your problem then should be how to clean the document before executing another document.write. In this case, just use before the document.write, the method document.open, that removes all DOM nodes present in the document.

Something like that:

response.text().then(function(text) {
  document.open();
  document.write(text);
});

See similar examples. First, without the document.open:

setInterval(() => {
  document.write(Date.now() + '<br />');
}, 750);

With the document.open before the document.write:

setInterval(() => {
  document.open();
  document.write(Date.now() + '<br />');
}, 750);