HTML5 /使用Javascript - 按鈕單擊事件處理程序停止工作

我是新來的HTML5，我試圖做一個簡單的遊戲，你必須猜測介於0和99HTML5 /使用Javascript - 按鈕單擊事件處理程序停止工作

我得到它的工作，但在一些多家點（可能當我開始添加CSS？）按鈕停止工作，當你點擊它。按回車鍵仍然正常工作。

任何想法爲什麼點擊事件處理程序停止工作，以及如何解決它？

下面是代碼：

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

定義「不起作用」。它有什麼作用？ JavaScript控制檯中是否有錯誤？當你調試這個時，會發生什麼？點擊事件是否被處理？函數是否被調用？功能在哪裏/如何完成？「不起作用」不是有幫助的問題描述。 – David

鼠標單擊該event.keyCode將失敗的if語句，並得到了返回的功能，你需要調整，如果要檢查Enter鍵或單擊

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

JSfiiddle

來源

2014-07-14 12:16:09 JRulle

HTML5 /使用Javascript - 按鈕單擊事件處理程序停止工作

回答

相關問題