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

Question

我是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>

<---------------------------------------- ------------------>

使用Maraca代码后（问题依旧）：

<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)document.writeln('a list of html content A');
        if (tester==1)document.writeln('B a list of html content B');
    }       
    document.body.innerHTML='';        
</script>
<button id="switch-btn" onClick="switchTester();">To T1</button>

<---------------------------------------- ------------------>

又是Thz Maraca，他的脚本帮助html 固定内容的切换，但是如果内容有一些变量怎么办？像 score/weather 等？

马拉卡代码：

<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

>

Answer 1

（添加信息后的新答案。）这里是如何实现一个切换按钮的方法，它也可以切换内容：

http://jsfiddle.net/sjq5ts5q/（仅当显示内容的框架有焦点时才会注册按键事件）

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

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

after onclick (which will call a function), it keep loading and cannot detect keypress

javascript

onclick