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?"> 

Answer 1

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)

Answer 2

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>