ansaurus

Question

How to change onClick handler dynamically?

Answer 1

+16 A:

Try:

document.getElementById("foo").onclick = function (){alert('foo');};

CMS 2008-10-30 02:06:55

thanks! stupid case sensitivity and 'New'

Simon_Weaver 2008-10-30 02:12:30

I didn't realize that new would call the function on page init. Good to know.

discorax 2008-10-30 04:54:58

@discorax neither did i. in fact not until just now! a year later

Simon_Weaver 2009-12-05 19:58:45

i definitely would not use any getElementbyId stuff anymore. come a LONG way in my javascript experience in the past year. definitely recommend jQuery - or some other such framework. getElementById is just out of date now. see @darryl's answer below

Simon_Weaver 2009-12-05 20:00:16

Answer 2

+6 A:

jQuery:

$('#foo').click(function() { alert('foo'); });

Or if you don't want it to follow the link href:

$('#foo').click(function() { alert('foo'); return false; });

Darryl Hein 2008-10-30 02:10:13

You're missing a trailing ); in both of those.

Xiong Chiamiov 2009-08-30 18:13:23

Ops! thxs

Darryl Hein 2009-08-30 19:16:56

should be wrapped in $(function() { ... }; so that it runs (and looks in the dom for 'foo' only after the DOM is complete)

Simon_Weaver 2009-12-05 20:01:35

This DOES NOT Chante the link only but call it. $('#foo').onclick= is the good way to do it.

Daok 2009-12-05 20:06:09

Answer 3

+16 A:

Use .onclick (all lowercase). Like so:

document.getElementById("foo").onclick = function () {
  alert('foo'); // do your stuff
  return false; // <-- to suppress the default link behaviour
};

Actually, you'll probably find yourself way better off using some good library (I recommend jQuery for several reasons) to get you up and running, and writing clean javascript.

Cross-browser (in)compatibilities are a right hell to deal with for anyone - let alone someone who's just starting.

Már Örlygsson 2008-10-30 02:10:47

'return false;' is an important addition, IMHO.

Richard A 2008-10-30 02:14:40

Yup, for newcomers, return false is completely non-obvious.

Már Örlygsson 2008-10-30 02:18:38

Answer 4

A:

I'd try this in jQuery:

$('#foo').attr("onclick", "javascript: alert('foo');");

dhulk 2008-10-30 02:37:45

I don't know for sure, but I don't believe this will work (javascript:...).

Darryl Hein 2008-10-30 02:39:23

It may work (I didn't test it) but it's very poorly written code :(

Zack Mulgrew 2008-10-30 02:46:25

+1 Didn't address the OP question but answered mine!

Andrew 2010-04-06 14:05:38

Holy cow, what was I thinking?

dhulk 2010-04-08 11:42:08

Answer 5

+1 A:

I agree that using jQuery is the best option. You should also avoid using body's onload function and use jQuery's ready function instead. As for the event listeners, they should be functions that take one argument:

document.getElementById("foo").onclick = function (event){alert('foo');};

or in jQuery:

$('#foo').click(function(event) { alert('foo'); }

kgiannakakis 2008-10-30 07:37:12

Answer 6

+1 A:

Here is the YUI counterpart to the jQuery posts above.

<script>
  YAHOO.util.Event.onDOMReady(function() {   
    document.getElementById("foo").onclick =  function (){alert('foo');};
  });
</script>

blak3r 2009-04-07 04:41:00

Answer 7

A:

Hi all,

I tried more or less all above out the other day to dynamically assign onclick action for a button, but I was yet to find a working solution until I tried this one. I deem that it is identical for the link. There it is:

var submitButton = document.getElementById('submitButton'); submitButton.setAttribute('onclick', 'alert("hello");');

Cheers, Selin Ebeci

Selin Ebeci 2009-12-23 14:59:20

Answer 8

A:

Sorry to be an4l about it, but the YUI example above should really be:

<script>
  YAHOO.util.Event.onDOMReady(function() {   
     Dom.get("foo").onclick =  function (){alert('foo');};
  });
</script>

Web Development Guy 2010-03-16 11:40:43

Answer 9

A:

Help please

I am very new to this so please be kind and type very slow so I can understand....

how do I dynamically change an onclick event to a new function here is the example

<img name="space1" id="space1" src="images/8001.jpg" height="150 px" onclick="lrgWithInfo('1')" />

here is what isnt working all I want to change is the value passed.

document.getElementById("space1").onclick = lrgWithInfo('13');

Thanks for your help

kim

kim 2010-09-09 22:01:34

ansaurus

tags:

views:

answers:

How to change onClick handler dynamically?

related questions