button click event fires on page load

Question

I have a js and htlm code in jfiddle.

I have created the button onclick event on the object method and on the page load it firing the event. Is this some problem with my code.

var user = {
  data: [
    {name: 'T. Woods', age: 37},
    {name: 'P. Mickelson', age: 43}
  ],
  clickHandler: function (event) {
    console.log(this);
    var randomNum = ((Math.random() * 2 | 0) + 1) - 1; // Random number between 0 and 1
    $('input').val(this.data[randomNum].name + ' ' + this.data[randomNum].age);
  }
};

console.log(user);
$('button').click(user.clickHandler(this));

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
  <h1>Homepage Headline</h1>
  <div id="div1">
    <p>
      <button>Get Random Person</button><br>
      <input type="text">
    </p>
  </div>
  <script type="text/javascript" src="oops.js"></script>
</body>

</html>

Can you link the code ? Else we would not be able to help you — Shigehiro Kamisama, Jan 21 '20 at 10:41
Please don't circumvent the rules. Just do what you're asked to do. — Teemu, Jan 21 '20 at 10:43
do not skip the block about fiddle and code by posting the link as code. Post the code as text directly in the question. YOu can create a fiddle here by using the <> button — Lelio Faieta, Jan 21 '20 at 10:43

ButchMonkey · Answer 1 · 2020-01-21T10:54:03.773

Your click event listener needs to be a function otherwise it will trigger .click() on the button instead of creating a listener

See the documentation for .click()

$("button").click(function () {
   user.clickHandler(this)
});

Test it with your code here -

var user = {
 data :[
 {name: "T. Woods", age:37},
 {name: "P. Mickelson", age:43}
 ],
 clickHandler:function (event) {
  console.log(this);
 var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // random number between 0 and 1
 //console.log(this.data[randomNum].name + " " + this.data[randomNum].age);
  // This line is adding a random person from the data array to the text field
  $ ("input").val (this.data[randomNum].name + " " + this.data[randomNum].age);
 }
};
console.log(user);
$("button").click(function() {
  user.clickHandler(this)
});

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     
    </head>
    <body>
        <h1>Homepage Headline</h1>
  <div id="div1">
    <p>           
        <button>Get Random Person</button><br>
         <input type="text">
      </p>
        </div>
        <script type="text/javascript" src="oops.js"></script>
    </body>
</html>

thanks but my problem is click event firing on page load. Can you explain it more. — devendra singh, Jan 21 '20 at 10:55
[`.click()`](https://api.jquery.com/click/) expects a callback function, but by adding `(this)` you're invoking the function immediately — Shiny, Jan 21 '20 at 11:08
If this answer has helped you, please consider 'accepting' it; This will mark your question as solved, and also reward both you and the answerer some reputation - [How does accepting an answer work?](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) — ButchMonkey, Jan 22 '20 at 13:43

score 2 · Answer 2 · answered Jan 21 '20 at 10:46

2

The issue is because you invoke the user.clickhandler() function when the page loads and set its response as the click handler for the element.

You instead want to provide the reference to the function to the event handler. You will also need to bind() the scope of user to the reference, as that's what clickhandler() expects to run under. Try this:

$("button").click(user.clickHandler.bind(user));

Working example:

var user = {
  data: [{
    name: "T. Woods",
    age: 37
  }, {
    name: "P. Mickelson",
    age: 43
  }],
  clickHandler: function(event) {
    console.log(this);
    var randomNum = ((Math.random() * 2 | 0) + 1) - 1; 
    $("input").val(this.data[randomNum].name + " " + this.data[randomNum].age);
  }
};
$("button").click(user.clickHandler.bind(user));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<h1>Homepage Headline</h1>
<div id="div1">
  <p>
    <button>Get Random Person</button><br>
    <input type="text">
  </p>
</div>

answered Jan 21 '20 at 10:46

Rory McCrossan

331,213
40
305
339

can you explain more without bind what is happning? – devendra singh Jan 21 '20 at 10:49
`bind()` sets the scope that the function will run under. Because you expect `this` in the `clickHandler` to be the `user` object (and not the `button` element as it would be in a standard jQuery event handler) you have to manually change the scope, hence: `bind()` – Rory McCrossan Jan 21 '20 at 10:50
My problem is why user.clickHandler funciton running on page load it should run on the button click. – devendra singh Jan 21 '20 at 10:53
I know. I described the problem and gave you a solution in the above answer. – Rory McCrossan Jan 21 '20 at 10:53

score 1 · Answer 3 · answered Jan 21 '20 at 10:45

1

You need to attach the handler, not call it, and then bind the this object accordingly:

user.clickHandler.bind(user)

answered Jan 21 '20 at 10:45

Romi Halasz

1,949
1
13
23

Shigehiro Kamisama · Answer 4 · 2020-01-21T10:48:48.820

-1

This is not a problem, you call

$("button").click(user.clickHandler(this));

at the loading, then it call the click event

Replace it by

$("button").bind("click", user.clickHandler(this));

edited Jan 21 '20 at 10:48

answered Jan 21 '20 at 10:43

Shigehiro Kamisama

183
9

He just have to remove that to fix it @RoryMcCrossan – Shigehiro Kamisama Jan 21 '20 at 10:45
it should run on button click not on load. – devendra singh Jan 21 '20 at 10:47
1

this dose not fix my problem still button click event run on page load. – devendra singh Jan 21 '20 at 10:51
I would suggest you test your code, as it does not do what the OP requests, nor does it work as you describe – Rory McCrossan Jan 21 '20 at 10:52
I am not looking for the solution. looking for why on page load click event is firing? – devendra singh Jan 21 '20 at 10:58
@devendrasingh Because you call $("button").click(), and .click() is a function that fire the click event. You call in the root of your script, then on page load – Shigehiro Kamisama Jan 21 '20 at 11:09

button click event fires on page load

4 Answers4