getElementByID question

[darksarin]

I have a script that works, but there are certain areas that I am still trying to fix. This script is borderline for the DOM or general section, but I think this is the better place to put it.

I have a form with a select box that I need to use to control the appearance of other select boxes. As with good programming, I am trying to make this general enough to reuse in various places on the page.

Here is the script:
function changeDiv(opt_group, display){
var the_div = getOptionSelected(opt_group);
alert(the_div);
var the_style = getStyleObject(the_div);
if (the_style != false){
the_style.display = display;
}
}

function getOptionSelected(opt_group){
if(document.getElementById && document.getElementById(opt_group)){
alert(document.getElementById(opt_group).value);
}
else if (document.all && document.all(opt_group)){
alert(document.ads.all(opt_group).value);
}
else {
return false;
}
}

function hideAll(){
changeDiv("radio","none");
changeDiv("print","none");
changeDiv("tv","none");
changeDiv("internet","none");
changeDiv("other","none");
}

function getStyleObject(objectId){
if (document.getElementById && document.getElementById(objectId)){
return document.getElementById(objectId).style;
}
else if (document.all && document.all(objectId)){
return document.all(objectId).style;
}
else {
return false;
}
}
// -->


I am only having trouble with the getOptionSelected() function--the others work as designed (which is to dynamically hide/display divs). Note that I am currently using the alert() for bug-testing, instead of returning the values. When I do this, about 12 alert boxes pop up (probably based on the number of named elements on the page?), and in IE one of them will have the actual value of the selected item in the select box. Firefox/Mozilla just has a bunch of alert boxes that say either "undefined" or "false".

If necessary, I can post the related html, but for the sake of brevity, I will wait and see if that's important. I am not a big javascript programmer, but I am learning!

Thanks in advance for any help.

:rolleyes:

[darksarin]

I made the following changes, and am much closer (it works, but is NOT reusable).

<script type="text/javascript">
<!--
function selectDiv(option, display){
var the_div = getOptionSelected(option);
changeDiv(the_div, display);
}

function changeDiv(the_div, display){
var the_style = getStyleObject(the_div);
if (the_style != false){
the_style.display = display;
}
}

function getOptionSelected(opt_group){
if(document.ads.media && document.ads.media){
return(document.ads.media.value);
}
else if (document.all && document.all(opt_group)){
return(document.ads.all(opt_group).value);
}
else {
return false;
}
}

function hideAll(){
changeDiv("radio","none");
changeDiv("print","none");
changeDiv("tv","none");
changeDiv("internet","none");
changeDiv("other","none");
}

function getStyleObject(objectId){
if (document.getElementById && document.getElementById(objectId)){
return document.getElementById(objectId).style;
}
else if (document.all && document.all(objectId)){
return document.all(objectId).style;
}
else {
return false;
}
}
// -->
</script>

Now, I need to be able to change which form (explicitly passing this is an option, but ugly at best), and the select box (also, passing this is an option, but its ugly too).

Thanks again

[fci]

Here is something simple I wrote to observe the value of something

var limit = 10;
var obs = [];
observe = function(str)
{
new_length = obs.unshift(str);
obs.length = limit;
document.getElementById('observe').innerHTML = obs.join(', ')
};

// you will need <div id="observe"></div> somewhere in the page.


it's a simple way to observe the values of something.. change the value of limit to however many you want to be displayed at one time. you also have to read the output from right-to-left... maybe I should look into changing that..

the form name can be changed this way:

var form_name = "my_form_name";
varform = document.forms[form];


anyway... I want to see it more in context.

[Willy Duitt]

Now, I need to be able to change which form (explicitly passing this is an option, but ugly at best), and the select box (also, passing this is an option, but its ugly too).

You do not show how you are calling the function... But I am assuming by an onchange event handler on the select and using the keyword this to pass the object reference...

<select onchange="getOptionSelected(this)"...


function getOptionSelected(opt_group){
if(document.ads.media && document.ads.media){
return(document.ads.media.value);
}
else if (document.all && document.all(opt_group)){
return(document.ads.all(opt_group).value);
}
else {
return false;
}
}


If I understand the question, you wish to reference the form which this select is an element of without specifically passing or referencing the form name or place in the forms collection...

If so: return(opt_group.form[opt_group].value);

Should be the same as: return(document.ads.all(opt_group).value);

And cross browser to boot... Currently your use of document.all makes the script IE compatable only....

......Willy