Javascript onclick event triggering on page load

Question

I have the following html/javascript:

<div id="clickMe" style="width:200px;height:100px;background-color:red;">
click me
</div>

<script>
function bar(){
    alert("foo");
}

document.getElementById("clickMe").onclick = bar();
</script>

When I load this page, the function triggers and the alert pops up, and then it doesn't trigger when I click clickMe. I tried switching the div out for a button and that worked fine (didn't trigger on page load, did trigger on click). When I comment out document.getElementById("clickMe").onclick = bar();, the function doesn't trigger at all. I also tried adding onload functions surrounding the whole thing, and just the function, and just the trigger, to no great effect.

How do I trigger a javascript function by clicking on a div, and why is this not working?

Thank you.

j08691 · Accepted Answer · 2013-12-02 03:30:21Z

6

Remove the parenthesis from the function name (doing so invokes it):

document.getElementById("clickMe").onclick = bar;

jsFiddle example

answered Dec 2, 2013 at 3:30

j08691

209k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James G. Over a year ago

-_- I guessed it was a syntax error, didn't think it would be that simple. Thanks.

Collectives™ on Stack Overflow

Javascript onclick event triggering on page load

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related