/    Sign up×
Community /Pin to ProfileBookmark

Pass element to function

Copy linkTweet thisAlerts:
Oct 22.2008

Hi All,

Is it possible to pass an element reference to a function such as:

[CODE]<a href=’javascript:hideAll([B]this[/B]);’>Click Here</a>[/CODE]

And then get the class name of the element, such as:

[CODE]function hideAll(e) {
alert(e.id);
alert(e.className);
if(e.className == “hideAll”) {
e.className = “showAll”;
}
}[/CODE]

That gets to the root of what I’m trying to do.

Thanks.

_t

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@gabrieleOct 22.2008 — You are doing almost correct :p

you hideAll function is fine.

the problem lies that you call it from the href attribute through the javascript protocol.

This changes the scope of the executed call to the window so [b]this[/b] is reffering to the window.

if you change your
&lt;a href='javascript:hideAll(this);'&gt;Click Here&lt;/a&gt;
to
&lt;a href='#' onclick="hideAll(this);"&gt;Click Here&lt;/a&gt;

you will have no problems
Copy linkTweet thisAlerts:
@singltrk24authorOct 22.2008 — You are awesome!

Thank you!

Although I did have to make a slight adjustment. The actual function I am using hides and shows a div based on the click. When I used the:

[code=html]<a href = "#">[/code]

It would reload the page and jump back to the top. To get around this I created a dummy function to call like so:

[code=html]<a href="javascript:doNothing();" onClick = "hideAll(1, this);" class="hideAll">[/code]

&

[CODE]function doNothing(){
//do nothing
}

function hideAll(nr, e) {
alert(e.className);
}[/CODE]

Works great. Thanks again.

_t
Copy linkTweet thisAlerts:
@mrhooOct 22.2008 — You can get a reference to the target or source of an event, like a click,

from the event itself, without needing to pass anything.

Since click events bubble, you can 'listen' from the body, or any element that contains your events:

[CODE]document.body.onclick= function(){
var who= window.event? event.srcElement: arguments[0].target;
if(who.className== 'hideAll') who.className= 'showAll';
else if(who.className== 'showAll') who.className= 'hideAll';
// if(who.id) alert(who.id +' class='+who.className
}[/CODE]
Copy linkTweet thisAlerts:
@Declan1991Oct 22.2008 — The way to avoid it jumping to the top of the page (it doesn't actually reload, just move), is to add return false after the function.&lt;a href="#" onClick = "hideAll(1, this);[b]return false;[/b]" class="hideAll"&gt;But that's just to let you know, a solution like mrhoo's is much easier to maintain.
Copy linkTweet thisAlerts:
@singltrk24authorOct 22.2008 — Thanks mrhoo. I like that solution a lot.

Thanks Declan, that is a much better approach than my doNothing function.

_t
×

Success!

Help @singltrk24 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 4.25,
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,
)...