13

I wrote a JavaScript class called MyClass in which I've defined a method closeThis

MyClass = function() {
  this.closeThis = function() {
    document.getElementById("hidePane").style.display = 'none';
  }
}

Now, in my html, i'm trying to call that as follows...

<script type="text/javascript">
  function callThis() {
    var myclassObj = new MyClass();
    document.getElementById("closeButton").onclick = myclassObj.closeThis();
  }
</script>

The above callThis will be called when I clicked on a button. The problem here is, onclick event on top of clsoeButtion is getting called automatically when page loads. What could be wrong in this?

Ivar
  • 6,138
  • 12
  • 49
  • 61
Sriram
  • 2,909
  • 8
  • 27
  • 35

3 Answers3

18

You're calling the function right away.

When you leave the parentheses on the function reference, what you're basically saying is:

Evaluate the closeThis function and assign the result to onclick

when what you really want to do is assign the function reference to the click handler:

document.getElementById("closeButton").onclick = myclassObj.closeThis;

Leave out the parentheses instead, and you'll bind the closeThis function to the onclick. What this instead says is:

Assign the function closeThis to the click handler.

You are essentially assigning the function to the variable as a first-class object, or a reference to a function.

As an aside, my personal preference is to always use an anonymous function wrapper. Sometimes you need to be able to pass parameters into your function, and this makes sure that you can more easily do so:

document.getElementById("closeButton").onclick = 
    function() {
        myclassObj.closeThis();
    };
jamesmortensen
  • 33,636
  • 11
  • 99
  • 120
  • 2
    Thanks @jmort253 It worked like charm... The first approach you suggested is like assigning the result to the onclick event which is weird. The second approach is cool. As you said, I can now still pass the parameters. Many Thanks :-) – Sriram Apr 11 '12 at 07:58
5

it should be document.getElementById("closeButton").onclick = myclassObj.closeThis; not myclassObj.closeThis();

myclassObj.closeThis() will call the function then assign value to onclick

James
  • 13,571
  • 6
  • 61
  • 83
2

You need to remove () from it otherwise it gets called immediately because that's how you call a function by suffixing (), so simply remove these braces:

document.getElementById("closeButton").onclick = myclassObj.closeThis;
Sarfraz
  • 377,238
  • 77
  • 533
  • 578