0

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?

1
  • All of the answers so far work for me, including in FF 3.5. Perhaps you're doing something else to cause the failure? Sep 11, 2009 at 15:33

6 Answers 6

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

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

2
  • the element in question is an input of type image
    – KJ Saxena
    Sep 11, 2009 at 15:20
  • try onchange, probably it would help. Or do you want some action before 'Open File' dialog?
    – zzandy
    Sep 11, 2009 at 15:57
2
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.

1

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

1

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

1
  • No need to create intermediate i variable, specially that it is declared in a global scope.
    – kangax
    Sep 11, 2009 at 17:22
0
img.onclick = function() { alert('hi'); };
0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.