asked on

JavaScript: onClick get the HTML tagName and href value and pass them as parameters. e.g.) function(parm1, parm2);

Hello Experts,

I am trying to build a function that can do followings,

1. onClick and get the element tagName and it's href value if the tagName is <a href>

2. If the tagName is A, pass the tagName and href value to parameters

3. If the tagName is not A, just pass the tagName

If I don't pass the parameters in the onclick event, I can see the value of the tagName and href in alert windows.

I would like to pass those two parameters.

How can I pass obj and linkValue as a parameter? Please find the sample codes in the attachment.

<script>
function tracking(obj, linkValue) {
obj = obj || window.event,
obj = obj.target || ev.srcElement;

linkValue = linkValue || window.event;
linkValue = linkValue.target || linkValue.srcElement;

if (obj.tagName == 'A') {

linkValue=linkValue.href;
obj = obj.tagName;


}
}
</script>

<a href="http://www.google.com" onClick="tracking(obj,linkValue);">Click Here</a>

Open in new window

Thanks in advance.

MajorBigDeal

Hope I understood your question correctly - here is a way to pass the element and access any of the attributes. In this case I am accessing tagName but you can get to pretty much anything.

<script>
function tracking(obj)
{
alert(obj.tagName);
}
</script>

<a href="http://www.google.com" onClick="tracking(this);">Click Here</a>

MajorBigDeal

Actually, your code looks good except that I passed this in the onClick. I'm not sure if that is what you were asking about or if I missed the point of your question. If so, please clarify.

sunflowersh

ASKER

Hi MajorBigDeal,

Thanks for taking a look and leaving a comments. My code works half way of what I am trying to achieve.

What I am struggling is to set the rendered codes as below when the HTML element is clicked.

<a href="http://www.google.com" onClick="tracking('a','http://www.google.com');>

Open in new window

Hope I explained well.

MajorBigDeal

Like this?

<a href="http://www.google.com" onClick="tracking(this.tagName, this.href);>

MajorBigDeal

sunflowersh

ASKER

Thanks alot! It's much simpler.

Is it possible to print the actual value instead of (this.tagName, this.href) similar to how the pop-up alert window shows?

ASKER CERTIFIED SOLUTION

MajorBigDeal

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sunflowersh

ASKER

Thanks for your help! It's now a lot closer to what I wanted to achieve.

Michel Plungjan

Hi sorry for interrupting

Two MAJOR issues:

1) NEVER document.write after the page has rendered - it wipes the pages and the scripts on it and will behave completely unpredictable in various browsers
2) return false in the onclick of a link that is not supposed to load a page in the href. It will partially unload the page and have major side effects in some browsers or return true to allow the link to be followed, but then you cannot see your tracking!!!

I think I know what you want and will return to you when I am behind a real computer and not just my iPad

Here is the above script fixed

<script>

function tracking1(obj) {
  document.getElementById("trackingDiv").innerHTML += "<br>"+obj.tagName + " " + obj.href;
  return false; 
}
</script>

<a href="http://www.google.com" onClick="return tracking1(this);">Click Here 1</a>

<br><br><br><br>

<div id="trackingDiv"></div>

Open in new window

It would be useful to know what exactly you want to track and why. There may be frameworks out there that an help.

So far it looks like you need to monitor document.onclick and look at the event's target tag name as you began in your original code