I'm Stumped.

[casper3912]

I have a select box and some of its grandchildren are anchors, i need for those anchors to do what anchors do. I recieve one of two errors depending on what method i try to use. the error message while trying to retrieve the href value of the anchor by .getAttribute() is that it isn't a function [i get the same with the toUpperCase()]the problem while useing the obj.href method is that href is undefined.i'm not sure why thats happening, any ideas?javascript

/*onChangeLinkBox is assigned to select boxs with names of 'linkBox' by another function, it works fine */function onChangeLinkBox(obj){	  var SelectedOptionIndex=obj.selectedIndex	  var SelectedOption =obj.getElementsByTagName('option')[SelectedOptionIndex];	  alert(SelectedOption.firstChild.href /*returns as undefined */)	  alert(SelectedOption.firstChild.getAttribute('href')) /*fireFox says getAttribute isn't a function, IE that the object doesn't support the method*/	  if(SelectedOption.firstChild.toUpperCase() == 'A'){		var HREF =SelectedOption.firstChild.getAttribute('href');		var ID ='#' + HREF.split('#')[1];			createCookie('OpenerDiv',ID,1)				window.open(HREF,'_self');	} else if {/* ...some other things, first i need to get the above working */}

HTML

<select name="LinkBox">	<option> Select </option>	<option><a href="About.html#Banners">		Banners	</a>	</option>	<option><a href="About.html#Icons">		Icons	</a>	</option>	<option>		<span id="PostToMyspace"> post to myspace</span>	</option>		 </select>

[Ingolme]

It sounds to me as if obj is either undefined or referring to the wrong object.

[casper3912]

thanks, so the problem might be with how i'm assigning the function... i have an odd feeling i might be referencing the window.;but i've done the same method and it worked before if my memory doesn't fail me. here is the function i'm using to assign the other function.

function initLinkBoxs () {var LinkBoxs = document.getElementsByName('LinkBox');	for(var i = 0; i < LinkBoxs.length; i++) {	LinkBoxs[i].onchange= function () { onChangeLinkBox(this) };	}}window.onload = initLinkBoxs;

[Ingolme]

"this" is most likely referring to the function rather than the element. The only way to be sure if it works right is to use the event object.

LinkBoxs[i].onchange = onChangeLinkBox

function onChangeLinkBox(e) {  e = e?e:window.event;  obj = e.srcElement?e.srcElement:e.target;  obj = (obj.nodeType == 1)?obj:obj.parentNode;  var SelectedOptionIndex=obj.selectedIndex

[casper3912]

i'm having the same problem.the modified code is below. the event obj is very interesting, thanks for showing me an example of it. i've read about it before and didn't understand it very well, i think i get it alittle better now.

function initLinkBoxs () {var LinkBoxs = document.getElementsByName('LinkBox');	for(var i = 0; i < LinkBoxs.length; i++) {	LinkBoxs[i].onchange= onChangeLinkBox;	}}window.onload =initLinkBoxs;function onChangeLinkBox(e){/*Next three lines is from Inglome, on w3schools.org forums. http://w3schools.invisionzone.com/index.php?showtopic=25935 */  e = e?e:window.event;  obj = e.srcElement?e.srcElement:e.target;  obj = (obj.nodeType == 1)?obj:obj.parentNode;  var SelectedOptionIndex=obj.selectedIndexvar SelectedOption =obj.getElementsByTagName('option')[SelectedOptionIndex];alert(SelectedOption.firstChild.href /*returns as undefined */)alert(SelectedOption.firstChild.getAttribute('href')) /*fireFox says getAttribute isn't a function, IE that the object doesn't support the method*/if(SelectedOption.firstChild.toUpperCase() == 'A'){		var HREF =SelectedOption.firstChild.getAttribute('href');		var ID ='#' + HREF.split('#')[1];			createCookie('OpenerDiv',ID,1);		window.open(HREF,'_self');	}}

[jeffman]

The biggest problem is you seem not to be debugging this thoroughly. E.g., alert(SelectedOption.firstChild) returns a DOM text object, not a link. Using DOM Inspector to see how your browser actually renders your HTML confirms this.But you seem not to have tried this very basic technique. Whenever you get confused, it's a good idea simply to alert() the objects that are giving you problems. Verify that they are what you think they are.Eventually it might occur to you that putting a link inside an option is a strange thing to do. In fact, it's invalid. What's happening is the DOM is rendering the text value of your <a> code but not actually constructing a link for you. So there is no href. If you want to put the URI somewhere, you might store it in the option's value attribute.Aside from that, this will never work:SelectedOption.firstChild.toUpperCase() == 'A'If firstChild referred to an <a> element, you could not toUpperCase() it, since that is a String method, not an element method. This could work:SelectedOption.firstChild.nodeName.toUpperCase() == 'A'But as I wrote above, you really don't want to be working with links in the first place. Or if you do, you do not want to put them in a select element.

[casper3912]

awesome, thanks for the info. its working now due to your advice. i would of never of thought it wasn't even constructing the link for me, i'll be sure to start checking the node type as well as the node value when i alert now. i know its rather strange, but its easier and less complicated(once understood) then dealing with a drop down menu and provides about the same functionality;

[jeffman]

I never doubted the concept, only the semantics and syntax. Trying to nest elements that have native, overlapping event handlers is bound to cause trouble. Much simpler to store a URI in the option's value attribute, and then your custom handler can pass the URI to the window's location object. The disadvantage is that it breaks for (the very few) users who have Javascript disabled.I'm curious to know what your solution is.

[casper3912]

This is it so far.

function initLinkBoxs () {var LinkBoxs = document.getElementsByName('LinkBox');	for(var i = 0; i < LinkBoxs.length; i++) {	LinkBoxs[i].onchange= onChangeLinkBox;	}}addLoadEvent(initLinkBoxs);function onChangeLinkBox(e){/*Next three lines is from Inglome, on w3schools.org forums. http://w3schools.invisionzone.com/index.php?showtopic=25935 */  e = e?e:window.event;  obj = e.srcElement?e.srcElement:e.target;  obj = (obj.nodeType == 1)?obj:obj.parentNode;  var SelectedOptionIndex=obj.selectedIndexvar SelectedOption =obj.getElementsByTagName('option')[SelectedOptionIndex];var HREF =SelectedOption.getAttribute('Destination');if(HREF){ 				ID = HREF.split('#')[1];			createCookie('SectionID',ID,1);			if ((location.pathname + location.hash) == HREF) {			window.location.reload()			}else{			window.open(HREF,'_self');			}		}}

Grow us:<select name="LinkBox">	<option> Select </option>	<option Destination="About.html#Div3Div1">		Banners	</option>	<option Destination="About.html#Div3Div2">		Icons	</option>	<option>		<span id="PostToMyspace"> post to myspace</span>	</option></select>