Calling a javascript function from an anchor tag?

**RobG** · Jul 23 '05, 09:01 PM

Re: Calling a javascript function from an anchor tag?

elsenraat_76@ya hoo.com wrote:[color=blue]
> Hello! I was wondering if someone could help me out with a problem I'm
> having? I'm trying to input a javascript value into an anchor tag
> (from a function), but don't have an event to call the function...if
> that makes sense. Here's what I mean...
>
> I have a javascript array set up like so:
>
> <script language="javas cript" TYPE="text/JavaScript">
>
> //custom object constructor
> function theImage(path, width, height, link)
> {
> this.path = path;
> this.width = width;
> this.height = height;
> this.link = link;
> }
>
>
> var arrayImages = new Array()
>
> arrayImages[0] = new theImage("/somelink_a.jpg" , "216", "302",
> "/somelink_b.jpg" );
> arrayImages[1] = new theImage(/anotherimage_a. jpg", "216", "302",
> "/anotherimage_b. jpg");
>
> etc, etc...
>
>
> And I have the following javascript functions...
>
>
> function getLink(i)
> {
> var currentLink = arrayImages[i].link;
> return currentLink;
> }[/color]

Please don't post code with tabs, use 2 or four spaces for indents.
These functions can be written like this:

function getLink(i) {
return = arrayImages[i].link;
}

[...][color=blue]
>
> Now, for the HTML...
>
> When I call these four functions through a body onLoad, like this:
>
> <body class="backgrou nd_color"
> onLoad="alert(g etLink(1));aler t(getPath(1));a lert(getWidth(1 ));alert(getHei ght(1));">
>
> the values '/anotherimage_a. jpg"', '216', '302', '/anotherimage_b. jpg'
> are returned in the alert. But, I would like to have these values
> returned in an anchor tage like so...
>
> <a href="javascrip t:getLink(1);" target="_blank" ><img
> src="javascript :getPath(1);" width="javascri pt:getWidth(1); "
> height="javascr ipt:getHeight(1 );" border="0"><br> LARGER IMAGE</a>[/color]

This seems pretty futile, but I'll play along anyway. Presumably the
A elements are in the HTML source and you want to use JavaScript to
add properties. You could use the links collection, but it's likely
you have other images in your document so you can use ID's. You
could also give all the A elements you want to modify the same name
and then use getElementsByNa me, the following example uses IDs.

Give all your A elements an id like "anchor-1", "anchor-2", etc.:

<html><head><ti tle>blah</title>
</head><body onload="addAs() ;">
<script type="text/javascript">

function theImage(path, width, height, link) {
this.path = path;
this.width = width;
this.height = height;
this.link = link;
}

var arrayImages = [];
arrayImages[0] = new theImage("a.jpg ", "216", "302","a.jp g");
arrayImages[1] = new theImage("a.jpg ", "216", "302","a.jp g");

function addAs() {
if ( !document.getEl ementById
|| !document.creat eElement
|| !arrayImages ) {
return;
}
var x, i, j=arrayImages.l ength;
for ( i=0; i<j; i++ ){
x = document.getEle mentById('ancho r-'+i);
if ( x ) {
x.href = getLink(i);
var oImg = document.create Element('img');
oImg.src = getPath(i);
oImg.width = getWidth(i);
oImg.height = getHeight(i);
oImg.alt =
'Sunset over the Outer Barcoo (where fences are few)';
x.appendChild(o Img);
}
}
}

function getLink(i) { return arrayImages[i].link; }

function getPath(i) { return arrayImages[i].path; }

function getWidth(i) { return arrayImages[i].width; }

function getHeight(i) { return arrayImages[i].height; }

</script>
<a id="anchor-0" href="" target="_blank" >blah</a><br>
<a id="anchor-1" href="" target="_blank" >blah</a><br>
</body></html>

[...]

--
Rob

**scooter** · Jul 23 '05, 09:01 PM

Re: Calling a javascript function from an anchor tag?

Rob, thanks for your help!!! However, for some reason, the <body
onLoad="addAs() ;" is not finding the function! I added an alert to the
first line of the function addAs(), and the alert isn't firing. Any
idea on why it wouldn't be finding this function?

Thanks (again) in advance!

jason

RobG wrote:[color=blue]
> elsenraat_76@ya hoo.com wrote:[color=green]
> > Hello! I was wondering if someone could help me out with a problem I'm
> > having? I'm trying to input a javascript value into an anchor tag
> > (from a function), but don't have an event to call the function...if
> > that makes sense. Here's what I mean...
> >
> > I have a javascript array set up like so:
> >
> > <script language="javas cript" TYPE="text/JavaScript">
> >
> > //custom object constructor
> > function theImage(path, width, height, link)
> > {
> > this.path = path;
> > this.width = width;
> > this.height = height;
> > this.link = link;
> > }
> >
> >
> > var arrayImages = new Array()
> >
> > arrayImages[0] = new theImage("/somelink_a.jpg" , "216", "302",
> > "/somelink_b.jpg" );
> > arrayImages[1] = new theImage(/anotherimage_a. jpg", "216", "302",
> > "/anotherimage_b. jpg");
> >
> > etc, etc...
> >
> >
> > And I have the following javascript functions...
> >
> >
> > function getLink(i)
> > {
> > var currentLink = arrayImages[i].link;
> > return currentLink;
> > }[/color]
>
> Please don't post code with tabs, use 2 or four spaces for indents.
> These functions can be written like this:
>
> function getLink(i) {
> return = arrayImages[i].link;
> }
>
> [...][color=green]
> >
> > Now, for the HTML...
> >
> > When I call these four functions through a body onLoad, like this:
> >
> > <body class="backgrou nd_color"
> > onLoad="alert(g etLink(1));aler t(getPath(1));a lert(getWidth(1 ));alert(getHei ght(1));">
> >
> > the values '/anotherimage_a. jpg"', '216', '302', '/anotherimage_b. jpg'
> > are returned in the alert. But, I would like to have these values
> > returned in an anchor tage like so...
> >
> > <a href="javascrip t:getLink(1);" target="_blank" ><img
> > src="javascript :getPath(1);" width="javascri pt:getWidth(1); "
> > height="javascr ipt:getHeight(1 );" border="0"><br> LARGER IMAGE</a>[/color]
>
> This seems pretty futile, but I'll play along anyway. Presumably the
> A elements are in the HTML source and you want to use JavaScript to
> add properties. You could use the links collection, but it's likely
> you have other images in your document so you can use ID's. You
> could also give all the A elements you want to modify the same name
> and then use getElementsByNa me, the following example uses IDs.
>
> Give all your A elements an id like "anchor-1", "anchor-2", etc.:
>
> <html><head><ti tle>blah</title>
> </head><body onload="addAs() ;">
> <script type="text/javascript">
>
> function theImage(path, width, height, link) {
> this.path = path;
> this.width = width;
> this.height = height;
> this.link = link;
> }
>
> var arrayImages = [];
> arrayImages[0] = new theImage("a.jpg ", "216", "302","a.jp g");
> arrayImages[1] = new theImage("a.jpg ", "216", "302","a.jp g");
>
> function addAs() {
> if ( !document.getEl ementById
> || !document.creat eElement
> || !arrayImages ) {
> return;
> }
> var x, i, j=arrayImages.l ength;
> for ( i=0; i<j; i++ ){
> x = document.getEle mentById('ancho r-'+i);
> if ( x ) {
> x.href = getLink(i);
> var oImg = document.create Element('img');
> oImg.src = getPath(i);
> oImg.width = getWidth(i);
> oImg.height = getHeight(i);
> oImg.alt =
> 'Sunset over the Outer Barcoo (where fences are few)';
> x.appendChild(o Img);
> }
> }
> }
>
> function getLink(i) { return arrayImages[i].link; }
>
> function getPath(i) { return arrayImages[i].path; }
>
> function getWidth(i) { return arrayImages[i].width; }
>
> function getHeight(i) { return arrayImages[i].height; }
>
> </script>
> <a id="anchor-0" href="" target="_blank" >blah</a><br>
> <a id="anchor-1" href="" target="_blank" >blah</a><br>
> </body></html>
>
> [...]
>
>
> --
> Rob[/color]

**scooter** · Jul 23 '05, 09:01 PM

Re: Calling a javascript function from an anchor tag?

Actually, I finally got this thing to fire, however, the snippet x =
document.getEle mentById('ancho r-'+i); is NULL. Any idea why it's
null? What value should it be showing in x?

Thanks in advance!

**Lasse Reichstein Nielsen** · Jul 23 '05, 09:01 PM

Re: Calling a javascript function from an anchor tag?

"scooter" <elsenraat_76@y ahoo.com> writes:
[color=blue]
> Actually, I finally got this thing to fire, however, the snippet x =
> document.getEle mentById('ancho r-'+i); is NULL. Any idea why it's
> null?[/color]

I haven't read the rest of the thread, but ID's may not contain the
character "-", so no matter what value "i" has, the resulting string
is not a valid id.

If the browser forgives you, and lets you use invalid strings for id's,
then you should still check that the document contains an element with
the id you are asking for.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

**RobG** · Jul 23 '05, 09:02 PM

Re: Calling a javascript function from an anchor tag?

Lasse Reichstein Nielsen wrote:[color=blue]
> "scooter" <elsenraat_76@y ahoo.com> writes:
>
>[color=green]
>>Actually, I finally got this thing to fire, however, the snippet x =
>>document.getE lementById('anc hor-'+i); is NULL. Any idea why it's
>>null?[/color][/color]

No. I tested the code in Safari & Firefox on Mac before posting, I've
now checked in Firefox and IE for Windows. The only issue seems to be
that Firefox on Windows does not display the images - I can't set the
image element's src attribute (either directly or using setAttribute).

But clicking on the image placeholders shows a new window with the
image. Go figure - I haven't sorted an answer to this one yet.
[color=blue]
> I haven't read the rest of the thread, but ID's may not contain the
> character "-", so no matter what value "i" has, the resulting string
> is not a valid id.[/color]

<URL:http://www.w3.org/TR/html4/types.html#type-name>

The above section of the HTML spec says:

"ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".")."

which seems to indicate that hyphens are OK, but I've misread the spec
before :-(

The hyphen isn't really necessary, it can be removed or replaced with
an underscore if required.
[color=blue]
>
> If the browser forgives you, and lets you use invalid strings for id's,
> then you should still check that the document contains an element with
> the id you are asking for.
>
> /L[/color]

--
Rob

Calling a javascript function from an anchor tag?

Calling a javascript function from an anchor tag?

Comment

Comment

Comment

Comment

Comment