Javascript onclick executing without click
<p>I am attaching onclicks to buttons with the function I want to be called when the event happens. When running the page, it goes ahead and executes the function for onclick without clicking. </p>

<pre><code>window.onload=function(){
var recipeCount = 0;
//gets the recipes and puts them in the menu bar #left
//places them in buttons
$.getJSON('recipes.json', function(data) {
       $.each(data.recipe, function(i, f) {
       var yep = "&lt;/br&gt; &lt;button type='button' id = '" + f.number + "'&gt;" + f.Name + "&lt;/button&gt; &lt;/br&gt;";
       $(yep).appendTo("#left");
       recipeCount = recipeCount + 1;


     });//for each recipe

   });//getJSON
//ends recipes to menu
for(var i = 1; i &lt; recipeCount + 1; i++){
    $(i).onclick = clicked(i);
}
$("one").onclick = clicked("one");
};//on load

function clicked(idNum){
    $.getJSON('recipes.json', function(data) {
       $.each(data.recipe, function(i, f) {
       if(idNum == f.number){
        var rec = "&lt;/br&gt; &lt;h1&gt; " + f.Name + "&lt;/h1&gt; " ;
        $(rec).appendTo("#bigBox");

       }

     });//for each recipe

   });//getJSON
}//clicked
</code></pre>
