ansaurus

Question

How to attach event handlers to document elements on the fly using Javascript?

Answer 1

+3 A:

element.onclick = function(event){alert("message");}

The event argument is optional in this case. Function body is code, not a string.

zzandy 2009-09-11 15:16:46

just not working! :(

Crimson 2009-09-11 15:20:26

the element in question is an input of type image

Crimson 2009-09-11 15:20:58

try onchange, probably it would help. Or do you want some action before 'Open File' dialog?

zzandy 2009-09-11 15:57:31

Answer 2

A:

img.onclick = function() { alert('hi'); };

David Dorward 2009-09-11 15:17:07

not working in Firefox 3.5

Crimson 2009-09-11 15:23:40

Works for me, Firefox 3.5.

NickFitz 2009-09-11 15:29:53

Works for me, FF 3.5

Crescent Fresh 2009-09-11 15:32:15

Answer 3

+1 A:

<body>
<input type="image" id="myImageInput">

<script type="text/javascript">
var theImageInput = document.getElementById('myImageInput');
theImageInput.onclick = function () { alert('myImageInput onclick invoked!'); }
</script>
</body>

Tested and working in Firefox 3.5.3.

Important points:

You have to obtain a reference to the element after it has been rendered in the document.
Firefox is not like Internet Explorer in that it does not make the name/id of each element a global variable. myImageInput.onclick = ... will not work in Firefox, you must use document.getElementById(theID) or document.forms['formName'].elements['elementNAME'] (if it is in a <form>) to obtain a reference to it.

If the sample above copied and pasted into a document is not working for you in Firefox 3.5, please disable all your add-ons (maybe one of them is causing a problem). If that still does not work, please edit your question to show us your exact source so we can help determine why it isn't working.

Grant Wagner 2009-09-11 15:31:39

Answer 4

+2 A:

img = document.getElementById("my_image");

img.onclick = "alert('hi')";

This is assigning a string.

img.setAttribute ('onclick',"alert('hi')");

This is also assigning a string.

img.onclick = function() {"alert('hi')";};

This is assigning a function, but all the function contains is a string. You should remove the quotes from around alert('hi').

img.onclick = function(evt) {"alert('hi')";};

Again, a function that only contains a string.

img.setAttribute ('onclick',function() {"alert('hi')";});

Again...

function handler(evt) {"alert('hi')";}
img.onclick = handler;

And again.

NickFitz 2009-09-11 15:33:43

Answer 5

+1 A:

this is woking!

<img src="PathToImage" id="myImage" height="30px" width="30px" />

<script type="text/javascript">
    var i = document.getElementById("myImage");
    i.onclick = function() { alert("hello"); };
</script>

EDIT:- Tested in IE 7, Chrome 4x, FF 3.5x

TheVillageIdiot 2009-09-11 15:41:06

No need to create intermediate `i` variable, specially that it is declared in a global scope.

kangax 2009-09-11 17:22:26

Answer 6

+1 A:

The first answer by zzandy should be fine. Check you are doing everything correctly especially firefox can be choosy about ensuring it is in complient mode. Here is the full code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
function AttachEvent()
{
    var theElement = document.getElementById( 'the_image' );
    theElement.onclick = function () { alert('message'); }
}
</script>
</head>
<body>
<img id='the_image' src='some_img.jpg' title='Click on the image' alt='Image not found' />
<button onclick='AttachEvent();'>Enable Click on image</button>
</body>
</html>

Dave 2009-09-11 15:51:30

ansaurus

tags:

views:

answers:

How to attach event handlers to document elements on the fly using Javascript?

related questions