Inline event handlers and anonymous functions

javascript event-handling inline onload-event

34,905

Solution 1

The this won't work inside the function since the function is called by the window object, therefore the this will refer to window.

If you want to wrap your code inside a function you must wrap that function, call it with the this set to the element or pass the this as a parameter:

<html>
    <body>
        <!-- call the function and set the this accordingly-->
        <img src="foo.png" onload="(function(){...}).call(this)" />

        <!-- pass the this as a parameter -->
        <img src="foo.png" onload="(function(e){....})(this)" />
    </body>
</html>

Yet this doesn't really make sense to me:

I have no control on the page itself (I only control the HTML string that the page will call),

Do you only have control over the img tags? If you can output abritary HTML, then why not just put something in a `script' tag?

Update
With a script block you could declare your function in there and then simply call it in the onload event.

<script>
    function doIt(el) {
       // code in here
       console.log(el.id); // you could do stuff depending on the id
    }
</script>

<img id="img1" src="foo.png" onload="doIt(this)" />
<img id="img2" src="foo.png" onload="doIt(this)" />

Now you need only one function for many images.

And if you need to get really fancy, you can setup your script tag to pull in jQuery or any other library.

<script src="somepathtojquery"></script>
<script>
   // do jquery stuff in herep

If you need a lot of these handlers jQuery could do the job.

Still I'm asking my self when you have full control over the HTML why don't you use a library in the first place? :)

Solution 2

Try:

<img src="blank.gif" onload="(function(el){el.onload=' ';el.src='image.jpg';})(this)" />

34,905

Author by

Christophe

SharePoint consultant with a focus on the user side: business analysis, process mapping information architecture workflows (SharePoint Designer) client side solutions My free client side solutions are published here: http://usermanagedsolutions.com/SharePoint-User-Toolkit/ On twitter: https://twitter.com/Path2SharePoint https://twitter.com/UserManaged My company is a Microsoft Partner for Office 365.

Updated on July 09, 2022

Comments

Christophe almost 2 years
I have a need to dynamically include and run a script in a page. I am using an image onload event for this:
```
<img src="blank.gif" onload="DoIt" />
```
The DoIt function looks like this (just made up this example):
```
this.onload=' ';this.src='image.jpg';
```
I have no control on the page itself (I only control the HTML string that the page will call), so I need to include the DoIt function explicitly in the markup.

I tried using an anonymous function, but it didn't work:
```
<img src="blank.gif" onload="function(){this.onload=' ';this.src='image.jpg';}" />
```
Should I just write the script inline, like this:
```
<img src="blank.gif" onload="this.onload=' ';this.src='image.jpg';" />
```
And in this case are there any limitations (e.g. script length)?

Thanks for your help!
Christophe over 13 years

Sorry Ivo, I can't see the tag name in your last sentence.
Christophe over 13 years

Well, my understanding is that if I use a script tag, the code will be added to the page but not executed. The purpose of the img onload is to trigger the execution.
Christophe over 13 years

ok, got it. The img tag is still needed to trigger the execution. I don't have full control on the HTML, I just provide HTML strings to my customers (it could be multiple Web pages, and change over time). And a library may be an overkill for my simple needs.
DarkNeuron almost 8 years

Simple example. +1