473,226 Members | 1,639 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,226 software developers and data experts.

Calling a javascript function from an anchor tag?

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="javascript" 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;
}

function getPath(i)
{
var currentPath = arrayImages[i].path;
return currentPath;

}

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

function getHeight(i)
{
var currentHeight = arrayImages[i].height;
return currentHeight;
}
Now, for the HTML...

When I call these four functions through a body onLoad, like this:

<body class="background_color"
onLoad="alert(getLink(1));alert(getPath(1));alert( getWidth(1));alert(getHeight(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="javascript:getLink(1);" target="_blank"><img
src="javascript:getPath(1);" width="javascript:getWidth(1);"
height="javascript:getHeight(1);" border="0"><br>LARGER IMAGE</a>

Is this possible? Is there a workaround for this? Any help would be
VERY appreciated!!

Jul 23 '05 #1
5 25804
el**********@yahoo.com wrote:
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="javascript" 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;
}
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;
}

[...]
Now, for the HTML...

When I call these four functions through a body onLoad, like this:

<body class="background_color"
onLoad="alert(getLink(1));alert(getPath(1));alert( getWidth(1));alert(getHeight(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="javascript:getLink(1);" target="_blank"><img
src="javascript:getPath(1);" width="javascript:getWidth(1);"
height="javascript:getHeight(1);" border="0"><br>LARGER IMAGE</a>


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 getElementsByName, the following example uses IDs.

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

<html><head><title>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.jpg");
arrayImages[1] = new theImage("a.jpg", "216", "302","a.jpg");

function addAs() {
if ( !document.getElementById
|| !document.createElement
|| !arrayImages ) {
return;
}
var x, i, j=arrayImages.length;
for ( i=0; i<j; i++ ){
x = document.getElementById('anchor-'+i);
if ( x ) {
x.href = getLink(i);
var oImg = document.createElement('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(oImg);
}
}
}

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
Jul 23 '05 #2
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:
el**********@yahoo.com wrote:
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="javascript" 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;
}


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;
}

[...]

Now, for the HTML...

When I call these four functions through a body onLoad, like this:

<body class="background_color"
onLoad="alert(getLink(1));alert(getPath(1));alert( getWidth(1));alert(getHeight(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="javascript:getLink(1);" target="_blank"><img
src="javascript:getPath(1);" width="javascript:getWidth(1);"
height="javascript:getHeight(1);" border="0"><br>LARGER IMAGE</a>


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 getElementsByName, the following example uses IDs.

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

<html><head><title>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.jpg");
arrayImages[1] = new theImage("a.jpg", "216", "302","a.jpg");

function addAs() {
if ( !document.getElementById
|| !document.createElement
|| !arrayImages ) {
return;
}
var x, i, j=arrayImages.length;
for ( i=0; i<j; i++ ){
x = document.getElementById('anchor-'+i);
if ( x ) {
x.href = getLink(i);
var oImg = document.createElement('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(oImg);
}
}
}

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


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

Thanks in advance!

Jul 23 '05 #4
"scooter" <el**********@yahoo.com> writes:
Actually, I finally got this thing to fire, however, the snippet x =
document.getElementById('ancho*r-'+i); is NULL. Any idea why it's
null?


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 - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #5
Lasse Reichstein Nielsen wrote:
"scooter" <el**********@yahoo.com> writes:

Actually, I finally got this thing to fire, however, the snippet x =
document.getElementById('ancho*r-'+i); is NULL. Any idea why it's
null?

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.
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.
<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.

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

--
Rob
Jul 23 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: bigbinc | last post by:
set scroll position in javascript. Is there a way to do this without using document.location, example. document.location = "#gohere" <a name="gohere">
1
by: Christian Radermacher | last post by:
Hi, the following code has the mentioned behaviour: <html> <head> <script type="text/javascript"> function newA() { for (i=0;i<3;i++) { var a = window.frames.document.createElement("a");
9
by: Astra | last post by:
Hi everybody Wonder if you could help me out. I created a simple JavaScript routine to enable a user to click backwards and forwards between small news articles. This routine works fine in IE...
18
by: Simula | last post by:
I am developing an HTML javascript application and I want to preserve state in a way that can be book-marked. I chose HTML anchors as a means of preserving state. When the application changes...
1
by: umamy | last post by:
Hi, I am writing code to do the followin: - user clicks a link - the page reloads and sets a cookie with a js function in the header. The function reloads the same page with the cookie set and...
5
by: srini.venkatesan | last post by:
I am trying to call a javascript from Datagrid which is using OnUpdatecommand, I dont see update being invoked, what am I missing, Is it the right way to call. I have just cut and pasted only the...
12
by: wavedancer | last post by:
I just tried validating the page I'm working on as <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> and it fails on the PayPal...
2
by: k.j.stellema | last post by:
I wonder if this is possible.. i have a couple of anchors inside a page and all have 'pretty' URLs in the form of 'foo/bar/' and 'foo/ béar/'. If the user clicks on such an anchor (they are...
3
by: ravitunk | last post by:
hi..i have a javascript function which uses window.open() function to open another window... as below... <script language ="JavaScript"> function openWin(url) { ...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.