Javascript - Calling a function
<pre><code>&lt;div id='dependent'&gt;
&lt;input type="button" value="Add" id='btn' onclick='addfunction()' /&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;

    var a = 1;
    var b = 1;
    var c = 1;

    function addfunction() {

        var c1 = document.createElement('input');
        c1.type = "checkbox";
        c1.id = "a" + a++;
        var c2 = document.createElement('input');
        c2.type = "checkbox";
        c2.id = "b" + b++;
        var c3 = document.createElement('input');
        c3.type = "checkbox";
        c3.id = "c" + c++;
        var c4 = document.createElement('br');


        document.getElementById("dependent").appendChild(c1);
        document.getElementById("dependent").appendChild(c2);
        document.getElementById("dependent").appendChild(c3);
        document.getElementById("dependent").appendChild(c4);
        // c1.onclick = dep();
        // function dep() { alert(this.id); }
        c1.onclick = function () { alert(this.id); };

    }
&lt;/script&gt;
</code></pre>

<p>When i call the function like this,</p>

<pre><code>c1.onclick = function () { alert(this.id); };
</code></pre>

<p>it works as expected. i.e, when i click on the checkbox, the alert appears with its id.</p>

<p>But if i call the function in this way,                                                      </p>

<pre><code>c1.onclick = dep();
function dep() { alert(this.id); }
</code></pre>

<p>The alert appears, when i click on 'Add' button(on calling addfunction()). why?</p>
