need to do different drop downs based on user choice

homework fail

[Baruch Menachem]

I am getting a reference error that "theSelect" is undefined. I don't know why it says that, as it is defined in the code.

the code is fed a state name through the onclick function of a radio button.
onclick= "oregeno('oregon');"

it then calls the code


function oregeno(state)
{

if (state="oregon")
{
var Options = ["Portland", "Salem", "Corvallis", "Bend","Eugene","Ashland" ];
}

else
{
var Options= ["Seattle", "Olympia", "Yakima", "Walla Walla", "Spokane", "White Salmon"] ;
}
var mypara=document.getElementById('paraplace');
var theform=document.createElement('form');
var theSelect=document.createElement('select');
nowOnChange=new Function("e","location.href=theSelect.options[theSelect.selectedIndex].value");
var theOption=document.createElement("OPTION");
var theText=document.createTextNode("choose city");
theOption.appendChild(theText);
theSelect.appendChild(theOption)
for (l=0; l< Options.length; l++)
{
theOption=document.createElement("OPTION");
theText=document.createTextNode(Options[l]);
theOption.setAttribute("value", Options[l]+".htm")

theSelect.appendChild(theOption);

}
theform.appendChild(theSelect);
mypara.appendChild(theform);
theSelect.onchange=nowOnChange;
}


the page renders, but when I select the state, I get a drop down with what looks like 6 members. But all the options are empty. When I choose one of the empty options, I get the error.

Thanks for your help. This place has been great.

[Baruch Menachem]

I went and re read my text, and solved the main problem. My cities showed up

Now the question is , does this line create my option value like I think it should? I still get the same error.

theOption.setAttribute("value", Options[l]+".htm")

[astupidname]

First note, you are not doing comparison here:

if (state="oregon")

because of the single = symbol you are assigning state to a value of "oregon" when you should be using double == to do comparison.

I am getting a reference error that "theSelect" is undefined

I still get the same error.

nowOnChange=new Function("e","location.href=theSelect.options[theSelect.selectedIndex].value");

You should never need to use the new Function() constructor, and in this particular case it is a source of problem for you.
Since the Function constructor takes string arguments, the body of the function created by new Function does not maintain references which were intended to be passed to it by you, such as theSelect. theSelect is a reference to a variable in your current function oregeno, but the string "theSelect" would not be a reference. So when the new Function is created, within the code in the body of the function returned by the Function constructor, it does not know (and should not) that theSelect refers to a variable scoped to the particular call to your oregeno function in the stack.

Use anonymous functions instead. In doing so you will usually be able to maintain references (won't go in to a big 'closures' discussion at the moment), so the following would work (important to localize the variable with the var keyword):

var nowOnChange = function () {
    location.href = theSelect.options[theSelect.options.selectedIndex].value;
};

Now the nowOnChange variable which is a function maintains the reference to theSelect from in the current function where the variable was created during a particular call to that function. However, there is still a better way in which we do not need to maintain that reference. Since nowOnChange is assigned as theSelect's onchange function anyways there is no need to maintain the reference to theSelect, when within theSelect's onchange or other methods the keyword "this" will refer to the object (theSelect) containing the method (onchange).

So it really should be, and is better written as:

var nowOnChange = function () {
    location.href = this.options[this.options.selectedIndex].value;
};

[Baruch Menachem]

Thanks!

The assignment thing is always a huge problem for me. I first learned to do programming on basic on the old apple II, and this business of assignment/evaluation gives me infinite pain. Pascal did it better, (:= for assignment) but still annoying.

Thanks for the help. I have to admit that much of it sailed way over my head. But your way is a whole lot easier to read.

What the points were as I understand you is
1) the function was getting passed strings and didn't know how to parse them correctly
2) an annoyomus function is better,
3) the Var keyword is important for scope
4) use of This improves readability.

Thanks again