Html5 / Javascript - 按钮单击事件处理程序停止工作

时间:2014-07-14 12:08:22

标签: javascript html html5 button

我是html5的新手,我正在尝试制作一个简单的游戏,您必须猜测0到99之间的数字。

我已经让它工作但是在某些时候(可能是我开始添加css?)按钮停止工作时单击它。按Enter键仍然可以正常工作。

任何想法为什么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>         

提前致谢。

1 个答案:

答案 0 :(得分:4)

鼠标单击的event.keyCode将使您的if语句失败并退出该函数,您需要调整if以检查输入密钥或单击

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

JSfiiddle