"this" and anchor??

[dresden_phoenix]

I would like to be able to pass the link element ( not the URL) in an achor...
Essentially:

           <p > i am content... <a href="#" onClick="foo(this); ">Show</a></p>

or PREFERABLY :

           <p > i am content... <a href="javascript:foo(this); ">Show</a><p>

When I do this, the value of "this" is only the URL and not an ELEMENT object, whose attributes I can then modify via foo(). Is there a way I can actually access the <A> element and not just it's URL?


As always all insight is greatly appreciated.

[felgall]

That second alternative you prefer is one to AVOID as that does not associate the code with an event in any browser.

When you do try to reference this inside an event handler just which object it refers to will depend on the browser being used.

The preferred alternative is to not place the JavaScript in the HTML at all but instead to place all the JavaScript in a separate file and attach it to the HTML from there using JavaScript. The simplest solution would be to give the <a> tag an id and use that to attach the function you want to call.

[dresden_phoenix]

Thanks Stephen,
I was hoping to avoid using "#" as an href and my preferred method seemed to be a way to kill two birds with one stone, but what you are saying makes sense. There is only one drawback to the ID idea. That is, when having a list of items i would have to create an ID for each item.. but then again I suppose that just means what I really need to do is create a function that unobtrusively parses through all <a>'s in the menu...

[oddz]

You don't necessarily need to add an id to the a. You just need a way to select that anchor which is going to depend entirely on the entire pages structure. There is likely a way to target it without adding an id.

[felgall]

Thanks Stephen,
I was hoping to avoid using "#" as an href and my preferred method seemed to be a way to kill two birds with one stone, but what you are saying makes sense. There is only one drawback to the ID idea. That is, when having a list of items i would have to create an ID for each item.. but then again I suppose that just means what I really need to do is create a function that unobtrusively parses through all <a>'s in the menu...

If it isn't actually linking to anything when JavaScript is disabled then it doesn't necessarily need to be an <a> tag. You could attach onclicks to all the <li> tags in a given part of the page just as easily and could also style the content so that they look like links (best done from JS so they only look like links when they actually work as links).

There are all sorts of different ways to access the HTML content from JavaScript. Having an id is just the simplest one where you want to access a specific element. If you had a list you could put an id on the <ol> or <ul> and then use getElementsByTagName('li') to get all the li tags so as to process all of them one after the other.

[dresden_phoenix]

I am relatively new at PURE js ( having relied mostly on jQuery) I was toying with the idea of coding my own lightbox style slide show. So the idea was that sooner or later I would NEED anchors, since I would want the links to load the image in a new window IF js was off.

BTW, I actually got it working!! With only one problem... It works perfectly with CSS/ js on; it works as expected with js and CSS off; of course, it's a moot point with images/css/js off; but it's buggy when js is ON but CSS is off... ( Actually I just checked it again.. it works when CSS is OFF , but not if CSS is on but the style sheet is missing.. apparently That's two different things)

This makes sense as the script relies on CSS positioning as well margins to center the image. I guess I was wondering if you knew of a way for the script to tell when stylesheet was missing so that it could correct itself and act as if CSS was off?