title: Javascript onclick event triggering on page load
body: <p>I have the following html/javascript:</p>
  
  <pre><code>&lt;div id="clickMe" style="width:200px;height:100px;background-color:red;"&gt;
  click me
  &lt;/div&gt;
  
  &lt;script&gt;
  function bar(){
      alert("foo");
  }
  
  document.getElementById("clickMe").onclick = bar();
  &lt;/script&gt;
  </code></pre>
  
  <p>When I load this page, the function triggers and the alert pops up, and then it doesn't trigger when I click <code>clickMe</code>. I tried switching the <code>div</code> out for a <code>button</code> and that worked fine (didn't trigger on page load, did trigger on click). When I comment out <code>document.getElementById("clickMe").onclick = bar();</code>, the function doesn't trigger at all. I also tried adding <code>onload</code> functions surrounding the whole thing, and just the function, and just the trigger, to no great effect.</p>
  
  <p>How do I trigger a javascript function by clicking on a div, and why is this not working?</p>
  
  <p>Thank you.</p>