0

下面的代码是一个简单的猜数字游戏。该函数guess()被调用两次。我不知道为什么会发生这种情况。

<!DOCTYPTE html>

<html>
    <head><title>Number Guessing Game version 1.0</title></head>
    <body>
        <form onsubmit="guess();return false;">
        <p><h2>I am your host, human.  I am thinking of a number between 0 and 100, including both</h2></p>
        <p><input type="text" id="inputId" autocomplete="off"></input><button id="submitButton" onclick="guess()">Guess!!</button></p>
        <p><span id="msgId"></span></p>
        <p>Guesses Remaining:<span id="guessId"></span></p>
    </body>
    </form>
    <script language="javascript">
        var doubleRandom = Math.random();
        var guessesLeft = parseInt("10");
        var intRandom = Math.round((doubleRandom*100));
        var spanObj = document.getElementById("msgId");
        var guessObj = document.getElementById("guessId");
        guessObj.innerHTML=guessesLeft;
        function guess()
        {
            var guessedNumber = document.getElementById("inputId").value;
            alert(23);
            if(guessedNumber==null || guessedNumber.trim()==''){
                spanObj.innerHTML="Type something, human";
                return;
            }
            if(isNaN(guessedNumber)){
                spanObj.innerHTML="That better be a number, Human.";
                return;
            }else{
                if(guessedNumber>100){
                    spanObj.innerHTML="That better be a number between 0 and 100, Human.";
                    return;
                }else{
                    spanObj.innerHTML="";
                }
            }
            var accurateAnswer = Math.round(guessedNumber);
            var difference = guessedNumber-intRandom;
            if(difference>45){
                spanObj.innerHTML="That's way too high, Human";
                return;
            }else if(difference<-45){
                spanObj.innerHTML="That's way too low, Human";
            }else if(difference<=45 && difference>0){
                spanObj.innerHTML="That's high, Human";
            }else if(difference>=-45 && difference<0 ){
                spanObj.innerHTML="That's low, Human";
            }else{
                spanObj.innerHTML="Bingo!! You got it!!  Refresh to play agin.";
            }
            if(guessesLeft<=0){
                spanObj.innerHTML="You have exhausted your number of guesses.  Try again.  Refreshing game....";
                setTimeout("location.reload(true)", 3000);
            }
            guessesLeft=guessesLeft-1;
            guessObj.innerHTML=guessesLeft;
        }
    </script>
</html>
4

3 回答 3

4

那是因为您调用了两次：一次是在按钮的onclick事件中，一次是在表单的onsubmit事件中。删除其中之一。

于 2013-07-21T16:39:15.913 回答
1

改变

<button id="submitButton" onclick="guess()">Guess!!</button>

到

<input type="submit" id="submitButton" value="Guess!!" />

这样，无论您是单击按钮、按 Enter 还是使用其他方法提交表单，您的事件都会触发一次。

于 2013-07-21T16:42:29.913 回答
0

当您按下输入按钮时，表单已提交。在表单提交时，您具有触发功能。

您可以做的是使按钮在单击时提交表单。

<button onclick="form[0].submit()">guess</button>

如果单击按钮，则提交表单，因此在单击按钮时调用提交中的函数。这也适用于点击进入。双向功能仅触发一次。

于 2013-07-21T16:48:59.043 回答