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

i new in javascript, quite confuse following problem:

before click button, keypress can detected , result in alert however, after click button, page keeps loading , no longer detect keypress anymore, ask why happen? wrong in code?(note that: use 2 diff functions 2 printing, same problem exist)

here code:

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

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

after using maraca code(problem still exist):

<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 list of html content b');     }            document.body.innerhtml='';         </script> <button id="switch-btn" onclick="switchtester();">to t1</button> 

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

thz maraca again, script switching of html fixed content, if content has variable? score/weather etc?

maraca code:

<script>         document.onkeypress = function(cde) {         cde = cde || window.cde;         alert ('some key pressed');     }      var state = 0;     function toggle() {         document.getelementbyid('toggle-btn').innerhtml = 'switch 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 state 1</button 

>

(new answer after information added.) here how can implement toggle button switches content:

http://jsfiddle.net/sjq5ts5q/ (key events registered if frame displaying content has focus)

<script>         document.onkeypress = function(cde) {         cde = cde || window.cde;         alert ('some key pressed');     }      var state = 0;     function toggle() {         document.getelementbyid('toggle-btn').innerhtml = 'switch 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 state 1</button> 

(old answer.) think want toggle 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) whatever want     }         </script>  <button id="switch-btn" onclick="switchtester();">to t1</button>