JavaScript onchange attr event for img

Question

No jQuery, just JavaScript. I'm using prototype.js but can't find in documentation how can I do that.

I have the img element, and some event that change attr src, so my code is:

document.getElementById('image').addEventListener('change', myFunction(), false);

but this solution doesn't work with img element!

Does your image element actually have an ID assigned to it, called 'image'? Please provide more real code. — jtromans, Oct 15 '13 at 08:28
yes, document.getElementById('image').setAttribute('color', 'red'); works fine. — Lubomur Marshal, Oct 15 '13 at 08:30
@LubomurMarshal I dont think img element supports onchange event, rather than that you can use onload event. — Voonic, Oct 15 '13 at 08:31
IIRC only input/select/textarea elements have an onchange event? — Gavin, Oct 15 '13 at 08:31
I think you should try to use `load` instead of `change` (this is not supported by img). — Praveen, Oct 15 '13 at 08:32
if jQuery can do this, must be some solution for javascript! — Lubomur Marshal, Oct 15 '13 at 08:33
Whenever a image is changed, it will be loaded, so bind it using load event. Since `change` event supports form elements (IIRC) — Praveen, Oct 15 '13 at 08:37

score 8 · Accepted Answer · answered Oct 15 '13 at 08:40

8

You can't use change event for img tag.

The change event is fired for <input>, <select>, and <textarea> elements when a change to the element's value is committed by the user.

So try like this whenever a image is changed, it will be loaded, so bind it using load event.

answered Oct 15 '13 at 08:40

Praveen

55,303
33
133
164

That's work! document.getElementById('image').addEventListener('load', qwe, false); – Lubomur Marshal Oct 15 '13 at 08:44
@LubomurMarshal I'm glad I was able to help :) – Praveen Oct 15 '13 at 08:45

score 1 · Answer 2 · edited May 23 '17 at 11:51

I too am trying to move an old-IE solution using img onchange, which used to detect change to image's src attribute just fine.

However, the load event solution here (and similarly in Detect a img src change), while great for detecting change to a new image, unfortunately does not fire if you are setting src='' [EDIT: HTML5 does not allow empty, I have changed to use src='data:null'] (I guess because there is no image to load). This is a genuine case for me (user can pick "no image"), and I still want to change attributes like alt & title. Just a heads-up for anyone else.

JavaScript onchange attr event for img

2 Answers2