이벤트 처리기를 사용하고 더블 클릭하고 키를 누르는 방법?

Question

여기서 "double click here"라고 말하면 올바르게 작동하도록 노력하고 있습니다. 클릭하면 "안녕하세요! 오른쪽 버튼을 눌렀습니다. 이제 비밀 메시지가 나옵니다. 키보드의 키를 누르십시오!"라고 말합니다. 그런 다음 kepress을 사용하여 다른 메시지를 작성하십시오. 내도 핸들러는 모두

window.onload = function(){ 
    function updateDocument(){ 
     $("#Document").html("Hello! You pressed the right button. Now you get my secret message. Press a key on the keyboard!"); 
     $("#Document").html("\n"); 
     $("#Document").html("\n"); 
    };  
    document.getElementById("here").addEventListener("dblclick", function(){ 
     updateDocument(); 
    }); 
    document.addEventListener("keypress", function(val){ 
     var x = val.keyCode; 
     var letter = String.fromCharCode(x);   
     $("#Document").append(letter); 
    }) 
}; 

<script type="text/javascript" src="triggered.js"></script> 
<div id="trigger1" class="trigger"> 
    double click 
    <p id = "here"> Here! </p> 
    <br> 
    <p id ="Document"></p> 
</div> 

Answer 1

두 번째와 .html(...) 교체 할 세 번째 이전 텍스트 기능이 될 것 같지 않습니다. 그래서 기술적으로 작동했습니다.

여기 제대로 작동합니다.

window.onload = function(){ 
 

 

 
     function updateDocument(){ 
 

 
      $("#Document").html("Hello! You pressed the right button. Now you get my secret message. Press a key on the keyboard!\n\n"); 
 

 
     }; 
 

 

 
     $("#here").on("dblclick", function(){ 
 
      updateDocument(); 
 
     }); 
 

 
     $(document).on("keypress", function(val){ 
 
      var x = val.keyCode; 
 
      var letter = String.fromCharCode(x);   
 
      $("#Document").append(letter); 
 
     }) 
 

 
    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <div id = "trigger1" class = "trigger"> double click 
 
     <p id = "here"> Here! </p> 
 

 
     <br> 
 
     <p id ="Document"></p> 
 
    </div>