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

Question

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

我已经开始使用它了，但是在某个时候（可能是当我开始添加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>

提前致谢。

Answer 1

单击鼠标的event.keyCode将使if语句失败并从函数中返回，您需要调整if以检查回车键或单击

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

JSfiiddle

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

问题描述

1 个解决方案

解决方案1
4 已采纳 2014-07-14 12:16:09

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

问题描述

1 个解决方案

解决方案1 4 已采纳 2014-07-14 12:16:09

解决方案1
4 已采纳 2014-07-14 12:16:09