what link was clicked a div.

Printable View

06-16-2008, 09:03 PM
riptide

what link was clicked a div.

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")}}
06-17-2008, 01:21 AM
jscheuer1

Quote:

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.
06-18-2008, 07:42 PM
riptide

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?
06-18-2008, 09:33 PM
jscheuer1

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.
06-24-2008, 09:29 PM
riptide

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
06-25-2008, 12:31 PM
jscheuer1

Just to be clear, nodes work fine in NS 7.
06-25-2008, 10:50 PM
riptide

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.
07-21-2008, 07:03 PM
riptide

follow up question

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/>
07-21-2008, 07:58 PM
riptide

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
07-22-2008, 04:40 PM
riptide

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.
07-22-2008, 04:59 PM
jscheuer1

This:

Quote:

Code:

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

is written wrong, it's else if not if else. And it is childNodes, not childNode. For childNodes[0], you can use firstChild instead though.

And the two conditions that you are checking for are identical anyway, so there would be no difference. If the code failed the first test, it would fail the second test. If the code passed the first test, it wouldn't consider the second test.

Now, I am having trouble following just what you want to do. I think that you want to branch on which (if any) of the Mlinks are involved.

In about the simplest of terms:

Code:

<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 number: ' + i + ' was clicked.'); 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>

That will get you the link number 0 to however many that there are if one of them was clicked. But let's say you want to do something to that link. Then you could do:

Code:

if (targ == Mlinks[i]){ Mlinks[i].style.backgroundColor = 'red'; return; }

or if what you want to do depends upon which link it is:

Code:

if (targ == Mlinks[i]){ if (i == 0) dosomething(); else if (i == 1) dosomethingelse(); else if (i == 2) doyetsomeotherthing(); else doadefaultthing(); return; }

or you could just pass off the value of i to another function for processing:

Code:

if (targ == Mlinks[i]){ processLinkNum(i); return; }

The function:

Code:

function processLinkNum(i){ do stuff here based on what the value of i is }
07-22-2008, 07:29 PM
riptide

i've been confused all this time thinking I sould recount the Mlinks to find a way to get their index number and all I had to do was just use the counter.

yes this is what I wanted to do. I even thought to use indexOf which is not cross browser. I also made a mistake on my code I was going to make the second test look for child nodes 4.

I should have looked for the easy way.

if (targ == Mlinks[i]){
if (i == 0) dosomething();
else if (i == 1) dosomethingelse();
else if (i == 2) doyetsomeotherthing();
else doadefaultthing();
return;
}
07-22-2008, 08:04 PM
riptide

it works! thanks!

but something very strange happens here if you click on the other links. If it doesn't leave the div yellow then there must be some other script causing a problem or my browser. my browser is not having a good day.

Code:

<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]){ if (i == 0) alert("this works"); else if (i == 1) document.getElementById('navebase').style.backgroundColor = '#EEF0F5'; else if (i == 2) alert("noscare"); else document.getElementById('navebase').style.backgroundColor = '#EEF440' ; 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> <style type="text/css">  </style> </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> <a href="#"onclick="return false;" >Click me</a> </div> </body>

</html>
07-22-2008, 11:14 PM
jscheuer1

This part:

Quote:

Code:

alert("Something other than an 'a' tag in the 'navebase' division was clicked");

should be all one line:

Code:

alert("Something other than an 'a' tag in the 'navebase' division was clicked");

But, you might not want anything to happen if one of the navebase links wasn't clicked, in which case all of that may just be removed.

Then again, you might want something else to happen when a click event that doesn't target a navebase link occurs, in which case you can substitute your preferred action for that part of the code.
07-23-2008, 03:57 PM
riptide

I broke up the code when I put it on here. It's all on one line in the file.

when you clicked on any link but the first one did the div turn yellow.
because the second link should turn it gray. But it come be some strange problem with how my browser reads the script.
07-23-2008, 07:15 PM
jscheuer1

So your question is? If you are still having problems:

Please post a link to the page on your site that contains the problematic code so we can check it out.
07-23-2008, 08:17 PM
riptide

it will be a while if i have to. I don't have it on a site yet. I'm going to test it in a few browsers first. maybe the problem will go away because I don't see any logical reason for it not to call functions for any link but the first link.