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

Question

I am new to html5 and am trying to make a simple game where you have to guess a number between 0 and 99. 我是html5的新手，正在尝试制作一个简单的游戏，其中您必须猜测一个介于0到99之间的数字。

I have gotten it to work but at some point (possibly when I started adding css?) the button stops working when you click on it. 我已经开始使用它了，但是在某个时候（可能是当我开始添加CSS时？），当您单击它时按钮停止了工作。 Pressing the enter key still works fine though. 按回车键仍然可以正常工作。

Any ideas why the click event handler stops working and how to fix it? 关于点击事件处理程序为何停止工作以及如何解决的任何想法？

Here is the code: 这是代码：

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

Thanks in advance. 提前致谢。

Answer 1

The event.keyCode for a mouse click will fail your if statement and get returned out of the function, you need to adjust the if to check for enter key OR click 单击鼠标的event.keyCode将使if语句失败并从函数中返回，您需要调整if以检查回车键或单击

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

JSfiiddle 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