what link was clicked a div.

**jscheuer1** · 07-22-2008, 04:59 PM

This:

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
}

**riptide** · 07-22-2008, 07:29 PM

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

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

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">
<!--
#navebase {
	background-color: #666666;
	height: 400px;
	width: 200px;
	border: dashed #3300FF;
	visibility: visible;
	z-index: 12;
	left: 3px;
	top: 100px;
}
#navebase .redder {
	background-color: #990000;
	padding: 2px;
	height: 20px;
	width: 190px;
	z-index: 13;
	left: 3px;
	position:inherit;
}
-->
</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>

**jscheuer1** · 07-22-2008, 11:14 PM

This part:

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.

**riptide** · 07-23-2008, 03:57 PM

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.

**jscheuer1** · 07-23-2008, 07:15 PM

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.

**riptide** · 07-23-2008, 08:17 PM

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.

Thread: what link was clicked a div.

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions