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?
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?
Share Improve this question asked Sep 11, 2009 at 15:13 KJ SaxenaKJ Saxena 21.8k24 gold badges85 silver badges111 bronze badges 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? – Crescent Fresh Commented Sep 11, 2009 at 15:33
6 Answers
Reset to default 3element.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.
The first answer by zzandy should be fine. Check you are doing everything correctly especially firefox can be choosy about ensuring it is in plient mode. Here is the full code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3/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>
<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 usedocument.getElementById(theID)ordocument.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'); };