How to assign a function with parameters without executing it in javascript?
<p>My objective is to change the border style of button elements when they are clicked with javascript. I made a function <code>setBorder</code> and assigned to the onclick event on all button elements as:  </p>

<pre><code>function setBorder(myobj) {     
            myobj.style.borderStyle = "inset";
        }  
var menubtn = document.getElementById("menu_btn");
menubtn.onactive = setBorder(menubtn);
</code></pre>

<p>The problem here is that the border style is changed as soon as the page loads because when javascript is parsed the function <code>setBorder()</code> is executed due to the brackets <code>()</code>. Another alternative I thought was:  </p>

<pre><code>function setBorder() {      
            this.style.borderStyle = "inset";
        }  
var menubtn = document.getElementById("menu_btn");
menubtn.onactive = setBorder;
</code></pre>

<p>I thought <code>this</code> would take the object <code>menubtn</code> -- but this didn't happen. Why didn't <code>this</code> take the object <code>menubtn</code>?</p>

<p>I think there could be a way in which <code>setBorder</code> could be linked as the prototype object of all button elements. The prototype object would have a function <code>func_SetBorder</code> as it's property. Then we could call the <code>func_setBorder</code> as:  </p>

<pre><code>menubtn.onclick = menubtn.func_setborder;
</code></pre>