/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] JavaScript addEventListener

Copy linkTweet thisAlerts:
May 15.2011

I have this script for greasemonkey (posted just a part of it)

[CODE]
var i;
var hrefs = document.getElementsByTagName(‘a’);

for(i=0;i<=hrefs.length-1;i++)
{
var dev_link = hrefs[i].href;

hrefs[i].parentNode.parentNode.addEventListener(“mouseover” , function() {var img = document.createElement(‘img’);img.src = dev_link;document.body.appendChild(img);} , false);
}
[/CODE]

and there are about ten different links on the page but when i hover on each link it show me just the last link saved in the “dev_link” var … how could i set-up to show the image with the link in the “href” attribute ot the currently link that the mouse is hovering?

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@interfacetricksMay 15.2011 — The problem is that the value of your variable dev_link has changed after the creation of the mouseover event (which uses the dev_link variable), and before the execution of the mouseover event.

So by the end of your loop, all mouseover event functions will be using the value of dev_link, that it had on the last iteration of the loop (namely the value of the last link's href).

To get around this you can create a function which takes the value of the href as a parameter, and creates the required mouseover function and returns it. The href parameter won't change after this function-creation function has finished. Making further calls to that same function-creation function will create new instances of it, which won't affect previous instances.

I've written up a few examples that demonstrate and explain this problem and the solution I just described. You can try them out here:

http://webinterfacetricks.com/looped_function_creation/

Please let me know if anything is unclear.

Hope this helps.
Copy linkTweet thisAlerts:
@KorMay 16.2011 — Try this:
<i>
</i>for(i=0;i&lt;=hrefs.length-1;i++)
{
[COLOR="Blue"]hrefs[i].parentNode.parentNode.dev_link[/COLOR] = hrefs[i].href;

<i> </i>hrefs[i].parentNode.parentNode.addEventListener("mouseover" , function() {var img = document.createElement('img');img.src = [COLOR="Blue"]this.dev_link[/COLOR];document.body.appendChild(img);} , false);
}
Copy linkTweet thisAlerts:
@Revolt666authorMay 16.2011 — Try this:
<i>
</i>for(i=0;i&lt;=hrefs.length-1;i++)
{
[COLOR="Blue"]hrefs[i].parentNode.parentNode.dev_link[/COLOR] = hrefs[i].href;

<i> </i>hrefs[i].parentNode.parentNode.addEventListener("mouseover" , function() {var img = document.createElement('img');img.src = [COLOR="Blue"]this.dev_link[/COLOR];document.body.appendChild(img);} , false);
}
[/QUOTE]

Thank you very much. it works like a charm ... i made some changes thought but thank you a lot!!!
×

Success!

Help @Revolt666 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...