Javascript onclick（将调用函数）之后，它将继续加载，并且无法检测按键

我是javascript新手，我对以下问题很困惑：

在我点击按钮之前，可以检测到按键并产生警报 但是，在我点击按钮后，页面继续加载，不再检测到我的按键，我想问一下为什么会发生这种情况？我的代码有什么错误？（注意：即使我使用2个diff函数进行两次打印，也存在相同的问题）

这是我的密码：

<script type="text/javascript">
    document.onkeypress = function(cde) {
        cde = cde || window.cde;
        alert ("some key pressed");
    }
    function abc(tester) {          
        if (tester == 0){
            document.writeln("<button onClick=\"abc(1);\" >To T1</button>")
            document.writeln("tester0")
        }
        if (tester == 1){
            document.writeln("tester1")
        }
    }
    abc(0);         
</script>

document.onkeypress=功能（cde）{
cde=cde | | window.cde；
警报（“某些按键按下”）；
}
功能abc（测试仪）{
如果（测试仪==0）{
书面文件（“至T1”）
书面文件（“测试员0”）
}
如果（测试仪==1）{
书面文件（“测试人员1”）
}
}
abc（0）；

使用Maraca代码后（问题仍然存在）：

document.onkeypress=功能（cde）{
cde=cde | | window.cde；
警报（“某些按键被按下”）；
}
var测试仪=0；
函数switchTester（）{
var b=document.getElementById（'switch-btn'）；
b、 innerHTML='到T'+测试仪；
测试仪=1-测试仪；
if（tester==0）document.writeln（“html内容列表a”）；
if（tester==1）document.writeln（'B a html内容列表B'）；
}       
document.body.innerHTML=''；
到T1

Thz Maraca再次强调，他的脚本帮助切换html固定内容，但是如果内容有一些变量呢？比如分数/天气等

马拉卡代码：

<script>    
    document.onkeypress = function(cde) {
        cde = cde || window.cde;
        alert ('some key pressed');
    }

    var state = 0;
    function toggle() {
        document.getElementById('toggle-btn').innerHTML = 'switch to state ' + state;
        var t = document.getElementsByClassName('toggle-content');
        t[state].style.display = 'none';
        state = 1 - state;
        t[state].style.display = 'block';
    }
</script>
<div class="toggle-content">
    <h1>default content</h1>
    <p>bla bla bla</p>
</div>
<div class="toggle-content" style="display:none">
    <h1>other content</h1>
    <p>whatever</p>
</div>
<button id="toggle-btn" onclick="toggle()">switch to state 1</button

document.onkeypress=功能（cde）{
cde=cde | | window.cde；
警报（“某些按键被按下”）；
}
var状态=0；
函数切换（）{
document.getElementById（'toggle-btn'）。innerHTML='switch to state'+state；
var t=document.getElementsByClassName（'toggle-content'）；
t[state].style.display='none'；
状态=1-状态；
t[state].style.display='block'；
}
默认内容
呜呜呜呜

其他内容
随便

切换到状态1（添加信息后的新答案）。以下是如何实现切换按钮，该按钮还可以切换内容：

（仅当显示内容的帧具有焦点时，才会注册关键事件）


document.onkeypress=功能（cde）{
cde=cde | | window.cde；
警报（“某些按键被按下”）；
}
var状态=0；
函数切换（）{
document.getElementById（'toggle-btn'）。innerHTML='switch to state'+state；
var t=document.getElementsByClassName（'toggle-content'）；
t[state].style.display='none'；
状态=1-状态；
t[state].style.display='block'；
}
默认内容
呜呜呜呜

其他内容
随便

切换到状态1

（旧答案）我想你要做的是一个切换按钮：

<script type="text/javascript">
    document.onkeypress = function(cde) {
        cde = cde || window.cde;
        alert ('some key pressed');
    }
    var tester = 0;
    function switchTester() {          
        var b = document.getElementById('switch-btn');
        b.innerHTML = 'To T' + tester;
        tester = 1 - tester;
        // if (tester == 0) do whatever you want to
    }        
</script>

<button id="switch-btn" onClick="switchTester();">To T1</button>


document.onkeypress=功能（cde）{
cde=cde | | window.cde；
警报（“某些按键被按下”）；
}
var测试仪=0；
函数switchTester（）{
var b=document.getElementById（'switch-btn'）；
b、 innerHTML='到T'+测试仪；
测试仪=1-测试仪；
//如果（tester==0）做任何你想做的事情
}        
到T1
页面底部是否有脚本？在你所有的html之后？我只是在html中的部分尝试脚本这通常是因为出现错误，你是否尝试在大多数浏览器中按F12 works，然后在复制错误后在控制台中查看它所说的内容，并且在if中有分号丢失了3条语句，there
缺失，这里有一个提示，因为您说自己是初学者：您可以使用单引号和双引号定义字符串，如果在html中处处使用双引号，那么在javascript中使用单引号就更容易了，因为您不必转义双引号，例如，
“…onclick=“abc（1）；”请不要使用
文档。请编写
。它刷新文档流。如果你打开DevTools并在点击按钮后检查你的实际DOM，你会发现你的html都消失了，包括你的
标记。哦，谢谢你的回答，事实上，我正在做一个切换器，它打印出2个不同的html内容，但你的代码不能这样做（我编辑了我的文章，以显示你的代码）@Question erXDD添加了示例，js小提琴来证明它的工作；-）再次感谢您的回复，但是，如果html的内容及时更改，我该怎么办？因为你写的是固定的html内容，而document.writeln（x）可以输出不固定的变量字符串。因此，我想问一下如何在javascript变量上执行此操作（如单击按钮后的游戏分数）@Question erXDD您必须动态替换innerHTML，如按钮文本所示。代码可能会变得丑陋，可读性也会大大降低。。。但事实就是这样，虽然可以通过使用一些参数封装函数调用中的每个“组件”来简化，但代码将变得可读again@Question-erXDD对内容
只使用一个div，并将其内容替换为
document.getElementById（'content'）。innerHTML=…
<script>    
    document.onkeypress = function(cde) {
        cde = cde || window.cde;
        alert ('some key pressed');
    }

    var state = 0;
    function toggle() {
        document.getElementById('toggle-btn').innerHTML = 'switch to state ' + state;
        var t = document.getElementsByClassName('toggle-content');
        t[state].style.display = 'none';
        state = 1 - state;
        t[state].style.display = 'block';
    }
</script>
<div class="toggle-content">
    <h1>default content</h1>
    <p>bla bla bla</p>
</div>
<div class="toggle-content" style="display:none">
    <h1>other content</h1>
    <p>whatever</p>
</div>
<button id="toggle-btn" onclick="toggle()">switch to state 1</button>

<script type="text/javascript">
    document.onkeypress = function(cde) {
        cde = cde || window.cde;
        alert ('some key pressed');
    }
    var tester = 0;
    function switchTester() {          
        var b = document.getElementById('switch-btn');
        b.innerHTML = 'To T' + tester;
        tester = 1 - tester;
        // if (tester == 0) do whatever you want to
    }        
</script>

<button id="switch-btn" onClick="switchTester();">To T1</button>