Help: return window.open array

[simplify-i-t]

Hi there,

It has been a few years since i have had to really think about JS and i am having problems.

I want to build an array of all the div id's on the page and then return that var to be used by other functions.

Can someone help me out here...

what i have working is this.

window.onload = function() {
var ids = document.getElementById('content').getElementsByTagName('div');
for (var i=0;i<ids.length;i++){
alert(ids[i].id); }
}

but the end result is that i remove the red lines and return the var ids to be used by other functions.

Any and all help very appreciated.
but the end result is that i remove the

Cheers,
Darren

[jscheuer1]

Well, if you literally want it to return the array:

function grabDivs() {
var ids = document.getElementById('content').getElementsByTagName('div');
return ids
}

With that in your script, anywhere (after the document is loaded) that you use 'grabDivs()' it will represent the array 'ids', ex:

alert(grabDivs()[3].innerHTML)

will launch an alert box with the 4th division's (assuming there is one in the collection/array) innerHTML (if any) displayed in it. Another strategy is to make the variable 'ids' global, then it will be the array and available for use:

window.onload = function() {
ids = document.getElementById('content').getElementsByTagName('div');
}

Here is an example of its use:

alert(ids[3].innerHML)

[simplify-i-t]

Well, if you literally want it to return the array:

function grabDivs() {
var ids = document.getElementById('content').getElementsByTagName('div');
return ids
}

With that in your script, anywhere (after the document is loaded) that you use 'grabDivs()' it will represent the array 'ids', ex:

alert(grabDivs()[3].innerHTML)

will launch an alert box with the 4th division's (assuming there is one in the collection/array) innerHTML (if any) displayed in it. Another strategy is to make the variable 'ids' global, then it will be the array and available for use:

window.onload = function() {
ids = document.getElementById('content').getElementsByTagName('div');
}

Here is an example of its use:

alert(ids[3].innerHML)

Thanks John for your ideas and comments.

Here is the full code i am trying to get to work. If i use it as it and load it at the end of the document - it works fine, however i wanted to load it at the start and do it a bit smarter with a windows.onload or something to the same effect. Do you have any ideas further?

var ids = document.getElementById('content').getElementsByTagName('div');


function switchid(id){	
	hideallids();
	showdiv(id);
}

function hideallids(){
	//loop through the array and hide each element by id
	for (var i=0;i<ids.length;i++){
		hidediv(ids[i].id);
	}		  
}

function hidediv(id) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'none';
		}
		else { // IE 4
			document.all.id.style.display = 'none';
		}
	}
}

function showdiv(id) {
	//safe function to show an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'block';
		}
		else { // IE 4
			document.all.id.style.display = 'block';
		}
	}
}

[jscheuer1]

Just use my second method in place of:

var ids = document.getElementById('content').getElementsByTagName('div');

It will create ids as a global variable. If you are more comfortable with having your globals declared outside a function (always a good practice) do this:

var ids
window.onload = function() {
ids = document.getElementById('content').getElementsByTagName('div');
}

[simplify-i-t]

Excellent John, thankyou! i have one other issue that you maybe able to help me with...

Here is the code i am now using.

var ids
window.onload = function() {
ids = document.getElementById('content').getElementsByTagName('div');
}


function switchid(id){	
	hideallids();
	showdiv(id);
}

function hideallids(){
	//loop through the array and hide each element by id
	for (var i=0;i<ids.length;i++){
		hidediv(ids[i].id);	
	}		  
}

function hidediv(id) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'none';
		}
		else { // IE 4
			document.all.id.style.display = 'none';
		}
	}
}

function showdiv(id) {
document.getElementById(id + 'tab').style.background = '#80b2ce'; 
	//safe function to show an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'block';
		}
		else { // IE 4
			document.all.id.style.display = 'block';
		}
	}
}

You can see in the showdiv(id) function i am changing the bgcolor of the div using document.getElementById(id + 'tab').style.background = '#80b2ce'; What i would also like to do is change the current tab div that was 'highlighted' back to its orginal color - have played around with the code... but it has been a very long day and i am simply not getting it right...

Any ideas?

[jscheuer1]

Well, this is getting into an area where I would need to see a working (or nonworking) example of the full markup to really tell. This is very similar (in concept, at least) to DD's Tab Content Script. Why not have a look and see how it is done there? Basically you need to store the original background somehow. You could have a style class (requires a different approach to altering the background to begin with, assigning it a different class with the new background) or variable available for that or a temp variable to hold the value. Then when the time comes, restore it from your variable or reassign it the default class.