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

StackOverflow https://stackoverflow.com/questions/17774515

Pergunta

The below code is a simple number guessing game. The function guess() is getting called twice. I am at loss of logic why it's happening.

<!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>
Foi útil?

Solução

That's because you are calling it twice: Once in the button's onclick event, and once in the form's onsubmit event. Delete one of them.

Outras dicas

Change

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

to

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

This way, irrespective of if you click the button, hit enter, or use some other method to submit the form, your event will fire, once.

When you are hit the enter button the form is submitted. On form submit you have the function triggering.

What you could do is to make the button submit the form when clicked.

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

If the button is clicked the form is submitted, therefore the function in from submission is called on button click. This works on hitting enter as well. Both way the function is triggered only once.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top