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 - 按钮单击事件处理程序停止工作

回答

相关问题