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

My javascript function in the code given below is getting called twice

本文关键字：调用 两次 函数 代码 javascript      更新时间：2023-09-26

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

这是因为您要调用它两次：一次在按钮的onclick事件中，一次在窗体的onsubmit事件中。删除其中一个。

更改

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

至

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

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

当您点击回车按钮时，表单就会提交。在表单提交时，您具有触发功能。

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

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

如果单击按钮，则表单将被提交，因此，在单击按钮时会调用来自提交的函数。这也适用于击打enter。双向功能只触发一次。

相关文章：