HTML5 인/자바 스크립트 - 버튼 이벤트 핸들러는 내가 HTML5에 새로운 오전

작업 중지를 클릭하고 당신은 내가 일을 입수했습니다 0 99HTML5 인/자바 스크립트 - 버튼 이벤트 핸들러는 내가 HTML5에 새로운 오전

사이에 있지만, 일부에서 숫자를 추측해야 간단한 게임을 만들려고 노력하고 있어요 포인트 (아마도 내가 CSS를 추가하기 시작했을 때?)를 클릭하면 버튼이 작동을 멈춘다. 엔터 키를 눌러도 제대로 작동합니다.

click 이벤트 처리기가 작동을 멈추고 문제를 해결하는 이유는 무엇입니까? 사전에

<!doctype html> 
<meta charset="utf-8"> 
<title>Guessing Game</title> 
<body> 
<p id="Message">I am thinking of a number between 0 and 99.</p> 
<input id="Guess" type="text" placeholder="Enter your guess here." autofocus> 

<button id="GuessClick" type=button>enter</button> 

<script type="text/javascript">   
     var RandomNumber = 0; 
     var NumberGuessed = 0; 
     var NumberOfGuesses = 0; 

     var Message = document.querySelector("#Message"); 
     var Guess = document.querySelector("#Guess"); 
     var GuessClick = document.querySelector("#GuessClick"); 

     RandomNumber = Math.floor(Math.random() * 100); 

     GuessClick.style.cursor = "pointer"; 
     GuessClick.addEventListener("click", EnterGuess, false); 
     window.addEventListener("keydown", EnterGuess, false);   

     function EnterGuess() 
     { 

      if(event.keyCode !== 13) 
      { 
       return; 
      } 

      NumberGuessed = parseInt(Guess.value); 

      if (isNaN(NumberGuessed) === true || NumberGuessed < 0 || NumberGuessed > 99) 
      { 
       Message.innerHTML = "Please enter a number between 0 and 99 inclusive. " + "You have guessed " + NumberOfGuesses + " times."; 
       return; 
      } 

      if (NumberGuessed > RandomNumber) 
      { 
       NumberOfGuesses = NumberOfGuesses + 1; 
       Message.innerHTML = "Lower, you have guessed " + NumberOfGuesses + " times. Previous guess was " + NumberGuessed + "."; 
       Guess.value = "" 
      } 

      if (NumberGuessed < RandomNumber) 
      { 
       NumberOfGuesses = NumberOfGuesses + 1; 
       Message.innerHTML = "Higher, you have guessed " + NumberOfGuesses + " times. Previous guess was " + NumberGuessed + "."; 
       Guess.value = "" 
      } 

      if (NumberGuessed === RandomNumber)     
      { 
       Message.innerHTML = "Correct! The mystery number was " + RandomNumber + ". It took you " + NumberOfGuesses + " guesses to get it! Enter another number to play again"; 
       NumberOfGuesses = 0; 
       RandomNumber = Math.floor(Math.random() * 100); 
       Guess.value = "" 
      } 
     } 
</script> 
<style> 
#GuessClick 
{ 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    color: #fff; 
    padding: 10px 20px; 
    border: 2px solid #000; 
    cursor: pointer; 

    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px;  

    background:-webkit-linear-gradient(top, #a3a3a3, #000); 
    background:-moz-linear-gradient(top, #a3a3a3, #000); 
    background: linear-gradient(top, #a3a3a3, #000); 

    -webkit-box-shadow: 5px 5px 3px rgba(0,0,0,0.5); 
    -moz-box-shadow: 5px 5px 3px rgba(0,0,0,0.5); 
    box-shadow: 5px 5px 3px rgba(0,0,0,0.5); 

    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none; 
} 

#GuessClick:hover 
{ 
    background: -webkit-linear-gradient(top, #acc7a3, #506651); 
    background: -moz-linear-gradient(top, #acc7a3, #506651); 
    background: linear-gradient(top, #acc7a3, #506651); 
} 

#GuessClick:active 
{ 
background: -webkit-linear-gradient(top, #858565, #c5c9a9); 
background: -moz-linear-gradient(top, #858565, #c5c9a9); 
background: linear-gradient(top, #858565, #c5c9a9); 
} 

</style>   
</body>

감사 : 여기

는 코드입니다.

출처

2014-07-14 helpmepls

를 키 입력을 확인 또는 클릭하면 조정해야 TypeError : GuessClick이 null입니다. " queryselector가 단추를 찾지 못하는 것 같습니다. – MightyPork

그리고 "이벤트가 정의되지 않았습니다". 디버거를 사용해보십시오. – MightyPork

"작동하지 않습니다."를 정의하십시오. 그것은 무엇을 하는가? 자바 스크립트 콘솔에 오류가 있습니까? 이걸 디버깅 할 때, 어떻게됩니까? 클릭 이벤트가 처리 되었습니까? 함수가 호출 되나요? 함수는 어디에서/어떻게 완성 되었습니까? "작동하지 않습니다"는 유용한 문제 설명이 아닙니다. – David

마우스 클릭에 대한 event.keyCode이 if 문을 실패하고이 함수에서 반환 얻을, 당신은 "

if((event.keyCode !== 13) && (event.keyCode !== 0)) 
    { 
    return; 
    }

JSfiiddle

출처

2014-07-14 12:16:09 JRulle

HTML5 인/자바 스크립트 - 버튼 이벤트 핸들러는 내가 HTML5에 새로운 오전

답변

관련 문제