Button not working Javascript

Question

I'm working on a javascript exercise to create a guessing game. I'm doing a bit of testing of the function before moving onto the next stage but this isn't working. When you click the button it's not giving the pop-up "Right Answer!". Any ideas?

<html>
<head>
<script>
var userguess = "5";
var answer = "5"; 

function Guess(){
if (userguess==answer){

alert("right answer!");
} else {

alert("wrong answer!");
} 
}
</script>
</head>
<body>
<form>
<input id="Guess" type="text" />
<button name="button" onClick="Guess()">Click me</button>
</form>
</body>
</html>

@Matjaž, you don't have to guess just because the question is about a guessing game. — Frédéric Hamidi
– Frédéric Hamidi, Commented Feb 6, 2015 at 9:08
because when you are clicking on the button the form is submitted and the page reloads. — Md Ashaduzzaman
– Md Ashaduzzaman, Commented Feb 6, 2015 at 9:08
Ashad is right, use <button type="button"> to alleviate this (or use the side effect in Developer's answer). — Frédéric Hamidi
– Frédéric Hamidi, Commented Feb 6, 2015 at 9:09
I've changed it to the above and now getting Uncaught TypeError: object is not a function when debugging in Chrome. This is on this line: <button type="button" type="button" onClick="Guess()">Click me</button> — David Johnson
– David Johnson, Commented Feb 6, 2015 at 9:22

Johni · Accepted Answer · 2015-02-06 09:29:01Z

5

There are two problems:

The button action is "submit" change it with: type="button"
Your input has the id "Guess", this conflicts with the function name.

So when you change the type of the button and rename the function it will work.

answered Feb 6, 2015 at 9:29

Johni

2,9804 gold badges30 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Justinas · Accepted Answer · 2015-02-06 09:10:10Z

3

When you click on button that is inside form, it will submit form and page will reload. To fix that, use type="button". It will prevent button to act as submit button

<form>
    <input id="Guess" type="text" />
    <button name="button" type="button" onClick="Guess()">Click me</button>
</form>

answered Feb 6, 2015 at 9:10

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

2 Comments

David Johnson Over a year ago

I've altered the code to this but it doesn't seem to be giving me the pop-up still and when debugging in chrome i'm getting: Uncaught TypeError: object is not a function. This is on this line: <button type="button" type="button" onClick="Guess()">Click me</button>

Johni Over a year ago

This answer is correct but solves only one of the two problems this code has. See my answer.

bitoiu · Accepted Answer · 2015-02-06 09:08:42Z

1

It's your form it's trying to submit the value:

http://jsfiddle.net/70ag6ang/

<head>
   <script>
     var userguess = "5";
     var answer = "5"; 

     function Guess(event){

     if (userguess==answer){

          alert("right answer!");
      } else {

     alert("wrong answer!");
    } 
}
</script>
</head>
<body>

<input id="Guess" type="text" />
<button name="button" onclick="Guess()">Click me</button>

</body>

answered Feb 6, 2015 at 9:08

bitoiu

7,5595 gold badges45 silver badges63 bronze badges

Comments

andrusieczko · Accepted Answer · 2015-02-06 09:22:23Z

It's because the button triggers the form to be submitted.

Also, you could use addEventListener method:

<html>
  <head>
    <script>
    var userguess = "5";
    var answer = "5"; 

    document.addEventListener('DOMContentLoaded', function() {
      document.querySelector('.my-button').addEventListener('click', function(event) {
        event.preventDefault();
        if (userguess==answer){
          alert("right answer!");
        } else {
          alert("wrong answer!");
        } 
      });
    }, false);

    </script>
  </head>
<body>
    <form>
      <input id="Guess" type="text" />
      <button name="button" class="my-button">Click me</button>
    </form>
  </body>
</html>

The first addEventListener listens when all the DOM element were added. Alternatively, you can put your <script> tag after <body> element.

The second one listens to click event on your element that you found using document.querySelector. Note, that I've added a class my-button to the element.

Arunprasanth K V · Accepted Answer · 2015-02-06 09:55:51Z

0

the problem is the Function name conflicts with the input id

Try following code

Html

<body>
<form>
<input id="Guess" type="text" />
<button name="button" type="button" onClick="guess()">Click me</button>
</form>
</body>

Javascript

var userguess = "5";
var answer = "5"; 

function guess(){
if (userguess==answer){

alert("right answer!");
} else {

alert("wrong answer!");
} 
}

You can check Here

http://jsfiddle.net/L1x184nk/

edited Feb 6, 2015 at 9:55

answered Feb 6, 2015 at 9:23

Arunprasanth K V

22.2k8 gold badges51 silver badges80 bronze badges

4 Comments

Rakesh_Kumar Over a year ago

Doesn't work when onclick event handler changed from guess to Guess!

Johni Over a year ago

Yes, because it conflicts with the input id. See my answer.

Arunprasanth K V Over a year ago

@Rakesh_Kumar yes Johni is correct , If you want to use Guess juest change id of text field, anyway normally javascript functions are starting with small letters

Johni Over a year ago

You could also use some kind of prefix for html elements. For example: txtGuess, btnSend etc. Yes it's stolen from Visual Basic ;-)

amitthk · Accepted Answer · 2015-02-06 09:37:01Z

-2

    var userguess = "5";
    var answer = "5";
    function GuessFn() {

      if (userguess == answer) {

        alert("right answer!");
      } else {

        alert("wrong answer!");
      }
    }

    <form>
      <input id="Guess" type="text"/>
      <button name="button" onclick="GuessFn()">Click me</button>
    </form>

UPDATE: After reading through comments in OP thread I noticed his Element ID is "Guess" as well as the function name is "Guess" so this could be the reason behind "object is not a function" error. I also removed my ambiguous statement as in discussion below in comments to my answer.

edited Feb 6, 2015 at 9:37

answered Feb 6, 2015 at 9:09

amitthk

1,1251 gold badge11 silver badges19 bronze badges

2 Comments

Arunprasanth K V Over a year ago

he says his function is not getting fired, not if condition inside it

amitthk Over a year ago

Okay, I probably made an ambiguous statement for which I got the negatives. What I meant to say is === compares values but also the type of variable. == compares by converting to common type info here. But anyways you're right OP is asking his function is not getting fired onclick.

Collectives™ on Stack Overflow

Button not working Javascript

6 Answers 6

Comments

2 Comments

Comments

Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related