what link was clicked a div.

**riptide** · 06-16-2008, 09:03 PM

now before you read this if anyone know a site on javascript that is past showing you how to use a loop or if statement please post the link.
I've read some books but they never really help you understand javascript
I would like to know how to connect objects to functions or use settime out with event handelers or something. I feel like I can't seem to get much better at javascript.

by the way I like was was done to the site by the way. The buttons are much better anyway

I'm trying to loop through all the links in a a Div and then find out what one was clicked. if it was link one I wanted to call an alert with the if statement. this is just to see if it works

also if you can call more that one link using switch how is it set up. I've tried using it and it doesn't work but if else doesn't work. I think i'm just a bad coder

function filink(e){
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
return false;
}

if (!document.getElementsByTagName) return false;
var Mlinks = document.getElementById('navebase').getElementsByTagName("a");
for (var ty=0; ty < Mlinks.length; ty ++) {

if (e==targ.Mlinks[0]){alert ("The function works")}}

**jscheuer1** · 06-17-2008, 01:21 AM

Originally Posted by riptide

Code:

function filink(e){
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
return false;
}



if (!document.getElementsByTagName) return false;
var Mlinks = document.getElementById('navebase').getElementsByTagName("a");
for (var ty=0; ty < Mlinks.length; ty ++) {


if (e==targ.Mlinks[0]){alert ("The function works")}}

There are a lot of problems here. But the highlighted return is outside of the function body. You just can't have that. Here's a bit of code that works:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Click Fun</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

if(document.getElementById)
document.onclick = function (e){
e = e? e : window.event;
var targ = e.target? e.target : e.srcElement,
Mlinks = document.getElementById('navebase').getElementsByTagName('a');
while(targ.parentNode && targ.parentNode.tagName && targ.tagName.toLowerCase() != 'a')
targ = targ.parentNode;
for (var i = Mlinks.length - 1; i > -1; --i)
if (targ == Mlinks[i]){
alert (Mlinks[i].href? 'The href is:\n' + Mlinks[i].href :
Mlinks[i].firstChild && Mlinks[i].firstChild.nodeValue? 'The first child node value is:\n' + Mlinks[i].firstChild.nodeValue :
"The 'a' tag in the 'navebase' division that was clicked has no href and no immediate text node.");
return;
}
alert("Something other than an 'a' tag in the 'navebase' division was clicked");
};

else alert ("A 'version 5' or better Browser is required for this script.");

</script>
</head>
<body>
<div>
Some Stuff Here<br>
<a href="http://www.dynamicdrive.com/">DD</a>
<hr>
</div>
<div id="navebase">
<a href="#" onclick="return false;">Hi</a><br>
<a>Bobalou</a><br>
<a><span>Dead?</span></a>
</div>
</body>
</html>

If you have questions about it - ask. That's how we learn.

P.S. quirksmode.org has lots of useful and more than just basic javascript, it's a good intermediate site.

**riptide** · 06-18-2008, 07:42 PM

one thing I noticed is that you added

while(targ.parentNode && targ.parentNode.tagName && targ.tagName.toLowerCase() != 'a')
targ = targ.parentNode;

this is the part that I would have never though to add. couldn't you make a working code without having to use this part. I thought you sould stay away from using nodes. also the tag name has to be lowecase.

is this code checking to see it the link is in the div nav base.
if so why use parent node and not something like document.getElementById(navbase).targ

is it the direction I have wrong div -> a when it should go from the link a to the div the element it's in?

**jscheuer1** · 06-18-2008, 09:33 PM

Good questions.

First of all, you're right - it's not required. I added it only to deal with:

HTML Code:

<a><span>Dead?</span></a>

But it would also be required for something like:

HTML Code:

<a><img src="whatever.jpg" border=0></a>

That's because, when you click on the span or the image, you are also clicking on the link, but the browser sees the primary click on the innermost element.

Now, I don't know why you asked about using nodes. There is nothing bad about nodes unless you are writing for IE or NS before v5. All modern browsers understand element nodes and have done so for quite a number of years. In fact, in many cases it is the preferred way to go about things, as it will likely be future compliant, while things like innerHTML and document.links may not be.

In any case, it doesn't check to see if the link is in the division, only to see if the click was registered by an a tag.

I used tagName.toLowerCase(), because in some DOCTYPES, some browsers will automatically shift tagNames to upper case before reporting them to the script parser, and because, if a tag is written in upper case, other browsers will report it as such, while some will convert it to lower case for you. Best to get everyone on the same page by converting it before testing it.

**riptide** · 06-24-2008, 09:29 PM

okay I understand it better now. I do know some one who is using NS7.

I will start using nodes now. it was very hard to code with out using them

**jscheuer1** · 06-25-2008, 12:31 PM

Just to be clear, nodes work fine in NS 7.

**riptide** · 06-25-2008, 10:50 PM

now just to clear this up if I wanted to act on the links I need to be able to use if else or a switch function for each link in the div.

I tried to make it work but I'm not sure if this is connected right.

I need something to check the link number against

I have f (Mlinks[i].childNodes[3]==targ) {do something}
should I be using the M.links array or the childnodes array.

or did I just connect this wrong. by the way this isn't throwing any errors.

I though about using a table and not the div nave base and saw tbody, tfoot and fhead stuff and desided that would be hard to edit if I wanted to add more links.

**riptide** · 07-21-2008, 07:03 PM

jscheuer1 gave me this code a while back since then

I tried to replace:

Code:

if (targ == Mlinks[i]){
alert (Mlinks[i].href? 'The href is:\n' + Mlinks[i].href :
Mlinks[i].firstChild && Mlinks[i].firstChild.nodeValue? 'The first child node value is:\n' + Mlinks[i].firstChild.nodeValue :
"The 'a' tag in the 'navebase' division that was clicked has no href and no immediate text node.");
return;

with:

Code:

if (targ==Mlinks[i].childNode[0]) {do something}
if else (targ==Mlinks[i].childNode[0]) {something else}

this just wont work it make no since so I wanted to use the links array of Mlinks but there is no way to connect targ to that and no I can find no info on the links array because there is no such thing

should I load the links with javascript from an array first. Then run jscheuer1's code modified to find out what number was the link that was clicked in the div navebase.
is this the only way to find out what link was clicked in a div and what number was the link if each link came one after another.
I'm sorry if I never asked about thing in the first thread; I though I knew how to change it.

Code:

<head>
if(document.getElementById)
document.onclick = function (e){
e = e? e : window.event;
var targ = e.target? e.target : e.srcElement,
Mlinks = document.getElementById('navebase').getElementsByTagName('a');
while(targ.parentNode && targ.parentNode.tagName && targ.tagName.toLowerCase() != 'a')
targ = targ.parentNode;
for (var i = Mlinks.length - 1; i > -1; --i)
if (targ == Mlinks[i]){
alert (Mlinks[i].href? 'The href is:\n' + Mlinks[i].href :
Mlinks[i].firstChild && Mlinks[i].firstChild.nodeValue? 'The first child node value is:\n' + Mlinks[i].firstChild.nodeValue :
"The 'a' tag in the 'navebase' division that was clicked has no href and no immediate text node.");
return;
}
alert("Something other than an 'a' tag in the 'navebase' division was clicked");
};

else alert ("A 'version 5' or better Browser is required for this script.");*/

</head>
<body>
<div>
Some Stuff Here<br>
<a href="http://www.dynamicdrive.com/">DD</a>

</div>
<div id="navebase">
<a href="#" onClick="return false;">Hi</a><br>
<a>Bobalou</a><br>
<a><span class="redder">Dead?</span></a> <br>
<a href="#" >Click me</a> <br>
<a><span class="redder">getting there</span></a> <br>
</div>
<body/>

**riptide** · 07-21-2008, 07:58 PM

wait I need to check the link that was clicked inxed against a number. Do I need to use indexOf.

var tHelinks = new array ()
for(Z=Mlinks.lenght -1;Z>-1;--Z){

tHelinks[Z]

}
if (tHelinks[Z].indexOf==0 && tHelinks[Z]indexOf==targ){ do something}
if else(tHelinks[Z].indexOf==1 && tHelinks[Z]indexOf==targ) { do something else}

this is below

**riptide** · 07-22-2008, 04:40 PM

okay I've got one last question about this script

every link on the page or in a div has an order. at first I though to use the links array.

I need to find the index number of the link that was clicked. should I load all the links into another array or use indexOf. but I know indexOf isn't crossbrowser.

I wish to use if else to check the index number of a clicked link so I can asign something to it.

like if (Mlinks[i].indexOf[2]==targ.) {do something}

or

if (targ==Mlinks[i] {
if (indexOf(targ)==3) { do something new} }

or could if be

var holder=Mlinks[i]

var if (holder==2 && holder==targ) {dosomething else}

I need to check if the link was clicked then be able to check the index of the link then check and asign something for it to do. I know that there is a way to copy the way indexOf works but I'm not sure if IndexOf could be used with and if statement.

Thread: what link was clicked a div.

Thread Tools

Search Thread

what link was clicked a div.

The Following User Says Thank You to jscheuer1 For This Useful Post:

follow up question

Bookmarks

Bookmarks

Posting Permissions