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

Question

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>

`setTimeout("location.reload(true)", 3000);` Don’t pass strings to `setTimeout`. `setTimeout(function() { location.reload(true); }, 3000);` — Ry-, Jul 21 '13 at 16:39
Thanks @minitech, does that have any performance implications? — Sid, Jul 21 '13 at 16:41
@SidCool Yes - while they may not be noticeable if you only do it once or twice, if you don't break the habit now then you WILL run into problems down the road. — Niet the Dark Absol, Jul 21 '13 at 16:41
Another sort of strange thing: `var guessesLeft = parseInt("10");`. Why not just `var guessesLeft = 10;`? — Ry-, Jul 21 '13 at 16:44
@minitech, hmm...you are right there as well, I can directly use the number literal. — Sid, Jul 21 '13 at 16:45

score 4 · Accepted Answer · answered Jul 21 '13 at 16:39

4

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.

answered Jul 21 '13 at 16:39

Niet the Dark Absol

320,036
81
464
592

Yes, but both are event specific. If I don't click on the button and simply press enter, why does the onclick event fire? – Sid Jul 21 '13 at 16:40
2

Because pressing Enter simulates clicking the primary button of the form. – Niet the Dark Absol Jul 21 '13 at 16:41
2

@SidCool: ` – Ry- Jul 21 '13 at 16:41
Ah, silly of me. Worked like a charm on removing onclick event for the button. Thanks @Kolink. – Sid Jul 21 '13 at 16:43

score 1 · Answer 2 · answered Jul 21 '13 at 16:42

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.

score 0 · Answer 3 · answered Jul 21 '13 at 16:48

0

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.

answered Jul 21 '13 at 16:48

Clain Dsilva

1,631
3
25
34

Why would you do that? The button submits the form by default. The extra `onclick` doesn’t actually do anything. – Ry- Jul 21 '13 at 16:57
Button does not submit the form by default, unless the button is an input element with type submit. Here "sideCool" needs an event to be triggered in button click as well [which is not disclosed here] – Clain Dsilva Jul 21 '13 at 17:02
http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-button-element *“The missing value default is the Submit Button state.”* – Ry- Jul 21 '13 at 17:12
1

Also, it doesn't have to be an `input` element. `button` elements can have a `type` attribute too. – BoltClock Jul 21 '13 at 18:29

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

3 Answers3