javascript - document.write之后如何 "go back"？

Question

我是 JavaScript 初学者。目前我正在学习按钮、警报和编写文档。对于一个有趣的小副项目，我想按一个按钮，然后将其写入文档。这很好用，但我还有其他按钮要按，但我不知道如何“返回”到其他页面并按其他按钮。我怎样才能制作一个“返回”按钮或使用计时器？哪个会更容易？一旦我进入其他页面，我就不想留在那里。

示例:

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

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

Answer 1

通过将按钮保留在容器中并将显示的“页面”保留在另一个容器中:

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>

或者通过更改按钮和内容:

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>

这个想法是使用innerHTML而不是document.write来避免替换所有文档(包括脚本)