Question

以下代码是一个简单的数字猜谜游戏。函数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>

Answer 1

那是因为你要两次调用它：一次进入按钮的onclick事件，一次进入表单的onsubmit事件。删除其中一个。

Answer 2

更改

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

到

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

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

Answer 3

当您点击输入按钮时，表单将被提交。在表单提交上，您具有触发功能。

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

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

如果单击该按钮，则提交表单，因此在按钮单击时调用提交中的函数。这也适用于击中输入。这两种方式只触发一次。

我在下面给出的代码中的javascript函数被调用两次

3 个答案: