How to "go back" after document.write?

Question

I am a beginner in JavaScript. Currently I am learning about buttons, alerts and writing documents. For a fun little side project, I want to press a button and then it writes to a document. That works great, but I have other buttons to press but I do not know how to "go back" to the other page and push those other buttons. How can I maybe make a button to "go back" or user a timer? Which would be easier? Once I am on that other page, I don't want to stay there.

Example:

function myTest1() {
     document.write("JavaScript")
}

<input type="button" onClick="myTest1()" value="What language is this?">

don't use document.write, instead just `document.body.textContent = "JavaScript";` that way you can modify the content in various ways. — Jonas Wilms, Sep 17 '18 at 13:58
Ideally, I have a few more buttons than "What language is this" but once the "document.write" happens, my screen just shows "JavaScript". How can I get back to the screen with the other buttons on it? — , Sep 17 '18 at 13:59
consider adding an element on the page with an ID.
. Then write the content to that div instead. document.getElementById('myContent').innerHTML = 'JavaScript'; Then to "go back" you just empty the contents of that element. document.getElementById('myContent').innerHTML = ''; — daddygames, Sep 17 '18 at 14:05
I would append text to an element instead of using `document.write` that way you won't [clear the page](https://stackoverflow.com/questions/10873942/document-write-clears-page) — Pete, Sep 17 '18 at 14:06
When you do a `document.write` the page gets destroyed (replaced with what you wrote). There is no going back. — Salman A, Sep 17 '18 at 14:07
[Don't use `document.write`](https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice). Consider following a newer tutorial if you want to learn JavaScript. — Bergi, Sep 17 '18 at 14:09

remix23 · Accepted Answer · 2018-09-17T14:17:09.603

By keeping the buttons in a container and the displayed "page" in another:

function myTest1() {
     // document.getElementBy('content') id to get the content element
     // set innerHTML to change the content
     document.getElementById('content').innerHTML = "JavaScript";
}

function goBack() {
     // document.getElementBy('content') id to get the content element
     // set innerHTML to change the content
     document.getElementById('content').innerHTML = "Click a button to change this content";
}

<div id="button-container">
    <input id="which-language-btn" type="button" onclick="myTest1()" value="What language is this?">
    <input id="bo-back-btn" type="button" onclick="goBack()" value="Go back" />
</div>
<div id="content" style="border: 1px solid;">
    Click a button to change this content
</div>

Or by changing both buttons and content:

function myTest1() {
     // document.getElementBy('content') id to get the container element
     // set innerHTML to change the content
     document.getElementById('button-container').innerHTML = "JavaScript<input type=\"button\" onclick=\"goBack()\" value=\"Go back\" />";
}

function goBack() {
     // document.getElementBy('button-container') id to get the container element
     // set innerHTML to change the content
     document.getElementById('button-container').innerHTML = "Click a button to change this content<input id=\"which-language-btn\" type=\"button\" onclick=\"myTest1()\" value=\"What language is this?\">";
}

<div id="button-container">
    Click a button to change this content<input id="which-language-btn" type="button" onclick="myTest1()" value="What language is this?">
</div>

The idea is using innerHTML instead of document.write too avoid replacing all your document (including your script)

score 0 · Answer 2 · answered Sep 17 '18 at 14:06

document.write clears the document when it's called:

Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document.

You could just keep appending the output to the body, but it's much better in the long run to adjust the content of a separate div, used for output, rather than just keep adjusting the body.

function myTest1() {
     document.getElementById('output').textContent += "JavaScript\n"
}

#output {
  width: 100%;
  min-height: 20px;
  background-color: rgb(20, 20, 30);
  color: white;
  margin-top: 20px;
  font-family: "Lucida Console";
  padding: 5px;
 }

<input type="button" onClick="myTest1()" value="What language is this?">
<div id="output">

</div>

How to "go back" after document.write?

2 Answers2