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

StackOverflow https://stackoverflow.com/questions/1411545

  •  05-07-2019
  •  | 
  •  

Question

Is there a way to attach an event handler like onclick=alert("Hi"); to an existing document element? (an image in my case)

I have already tried and failed with the following:

img = document.getElementById("my_image");

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

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

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

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

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

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

I am running out of ideas. Does anybody know how to do this?

Was it helpful?

Solution

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>

OTHER TIPS

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

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

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.

<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.

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

img.onclick = function() { alert('hi'); };
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top