using href vs. onclick to call javascript function

**Kalyug** · 10-05-2010

I need to call a java script function when the user clicks and got two different approaches. They assumes to perform the same thing, except you get more information when hovering the link using primary way.

1. What's the effective difference between these two method ?

2. Should I be using one method over the other?

Method 1:
<a href="javascript: ShowMovie('/media/showmovie.htm?movie=ds_tutorial.swf', 720, 580);" class="linkTitle">

Method 2:
<a href="javascript: void(0);" onclick="javascript: ShowMovie('/media/showmovie.htm?movie=ds_tutorial.swf', 720, 580);return false;" class="linkTitle">

**Logan 2** · 10-05-2010

Hello!

I was wondering if anyone could help me out with a issue that I have ? I am trying to input a javascript value into an anchor tag that is from a function but I don't have an event to call the function if that makes sense. Here's what I need to say..I have a javascript array written like so:

<script language="javascript" TYPE="text/JavaScript">

//custom object const
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....

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 described 4 functions via a body onLoad, such as :

<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 evaluated in the alert. But, I would like to have these values
evaluated in an anchor tag such as.

<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 it possible? Is there a workaround for it ? Any help would be appreciated !

**Praetor** · 10-05-2010

This assumes pretty futile but I will play along anyway. Presumably the A elements are in the HTML source and you desired to use JavaScript to associate properties. You could use the links collection but it is likely you have different images in your document . So you can use ID's. You could also provide entire A elements you desired to modify with the same name and then use getElementsByName, the following example uses IDs.

Just provide all your A elements an ID such as "anchor-1", "anchor-2"........

**kelfro** · 10-05-2010

Praetor thanks for your help!!!

However, for fewer causes , the <body onLoad="addAs();" is not getting the function! On other hand, I have added an alert to the first statement of the function addAs(), and the alert is not firing. Actually, I finally find this thing to fire, however, the snippet x = document.getElementById('ancho*r-'+i); is NULL. Any suggestion why it's NULL ? What value should it be showing in x?

Any idea about this and please suggest me proper reason ?

Thanks once again in advance!

**Zecho** · 10-05-2010

Originally Posted by kelfro

Praetor thanks for your help!!!

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

I haven't completed looked on the rest of thread, but ID's may not contain the character "-", so no matter what value "i" has, the evaluated string is not a valid ID. If the browser skips you and lets you use invalid strings for ID's then you should still test that the document have an element with the ID about which you are querying for.

**Praetor** · 11-05-2010

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

No. I tested the whole code snippet in Safari and Firefox on Mac before replying for the thread , I have now checked in Firefox and IE for Windows. The only problem seems to be that Firefox on Windows does not show the images - I am unable to set the image element's src attribute (either directly or using setAttribute).

But clicking on the image placeholders displays a new window with the
image. Go figure - I have not sorted an reply to this one yet.

**Praetor** · 12-05-2010

I haven't completed looked on the rest of thread, but ID's may not contain the character "-", so no matter what value "i" has, the evaluated string is not a valid ID. If the browser skips you and lets you use invalid strings for ID's then you should still test that the document have an element with the ID about which you are querying for.

The "ID and NAME tokens must be start with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".")." It seems to suggest that hyphens are OK, but I have misread the spec before :-(

The hyphen is not really important, it can be deleted or replaced with
an underscore if needed.