asked on

event handler scripted rather than in HTML tag

if this works:
---------------------------------------------------------------------------------------
<select name="client" onChange="change(this);" size="8" style="width:165px"></select>
---------------------------------------------------------------------------------------

to call the function change with the object reference to the selected value, then why won't this:
---------------------------------------------------------------------------------------
document.criteria.client.options[document.criteria.client.options.length - 1].onClick=populate();change(this);

or this:

document.criteria.client.options[document.criteria.client.options.length - 1].onClick=populate();change(document.criteria.client.options[document.criteria.client.options.length - 1]);

I need to pass a reference to the selected index to the change function on click. Please advise. Thanks.

ASKER CERTIFIED SOLUTION

ahosang

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kellybelly

ASKER

well - that's almost there. I get a call to the change() function with the object reference, but it's not going through the populate function first.

ahosang

Show small sample of code that doesn't work, or post a link

kellybelly

ASKER

//populate client and location boxes - called onLoad
function populate(){
      clearCombo();
      clearTemp();
      //populate client selections
      for (var i = 0; i < client_array.length; i++){
            document.criteria.client.options[document.criteria.client.options.length] = new Option(clientName_array[i], client_array[i]);
            document.criteria.client.size = 8;
      };
      //populate country selections
      for (var i = 0; i < country_array.length; i++){
            document.criteria.country.options[document.criteria.country.options.length] = new Option(country_array[i], country_array[i]);
            document.criteria.country.size = 5;
      };
      //populate style selections
      for (var i = 0; i < style_array.length; i++){
            document.criteria.style.options[document.criteria.style.options.length] = new Option(style_array[i].text,style_array[i].style);
            document.criteria.style.size = 5;
      };
      for (var i = 0; i < document.criteria.length - 1; i++){
            selected_array["'" + document.criteria[i].name + "'"] = undefined;
            document.getElementById(document.criteria[i].name + "P").style.display = 'none';
            document.criteria[i].disabled = false;
      };
      document.getElementById('selectedCell').style.display = 'none';
      document.getElementById("critThumbsRow").style.display = 'none';
      document.getElementById("critThumbsP").innerHTML = '';

};//end populate function------------------------------------------------------------------

function change(t){//change 'selected array' and SELECTED text at top of page - populate combo boxes based on selection
nm = 'city'; clearBox();//clear city and state boxes, and make them disappear
nm = 'state'; clearBox();
nm = t.name; val = t.value
selected_array[nm] = val//assign value to selected_array[this.name]
document.getElementById('selectedCell').style.display = 'block'//populate SELECTED text section
document.getElementById(nm + "P").style.display = 'block'
document.getElementById(nm + "P").innerHTML = val
      if ( nm == 'client' ){//if client is chosen get formal client name for 'SELECTED' text at top and change all other combo boxes accordingly
            clearBox();
            for (var i = 0; i < client_array.length; i++){
                  if ( client_array[i] == val) {
                        document.getElementById(nm + "P").innerHTML = clientName_array[i];
                        //put chosen criteria at the top of the list for that form element, space, then ALL other choices
                        document.criteria.client.options[0] = new Option (clientName_array[i],val);
                        document.criteria.client.options[1] = new Option (" ", " ");
                  };
                  document.criteria.client.options[document.criteria.client.options.length] = new Option (clientName_array[i], client_array[i]);
                  document.criteria.client.size = 8;
                  document.criteria.client.onChange = function(){
                        populate();
                        change(this);
            };      };
            style();
            country();
      };

      if ( nm == 'style' ) {
            clearBox();
            for (var i = 0; i < style_array.length; i++){
                  if ( style_array[i].style == val) { //change style options
                        document.getElementById(nm + "P").innerHTML = style_array[i].text;//get lighting style name instead of shortened version from select box and populate SELECTED text section
                        //put chosen criteria at the top of the list for that form element, space, then ALL other choices
                        document.criteria.style.options[0] = new Option (style_array[i].text,style_array[i].value);
                        document.criteria.style.options[1] = new Option (" ", " ");
                  };
                  document.criteria.style.options[document.criteria.style.options.length] = new Option (style_array[i].text, style_array[i].illumination);
                  document.criteria.style.size = 5
            };
            client();
            country();
            document.criteria.style.onChange = function(){
                  populate();
                  change(this);
      };      };

      if (nm == 'country'){
            clearBox();
            document.criteria.country.options[0] = new Option (val,val);
            document.criteria.country.options[1] = new Option (" ", " ");
            for (var i = 0; i < country_array.length; i++){
                  document.criteria.country.options[document.criteria.country.options.length] = new Option (country_array[i], country_array[i]);
            };
            client();
            style();
            document.criteria.country.onChange = function(){
                  populate();
                  change(this);
      };      };

      if ( nm =='city' ) {
            document.getElementById("cityP").style.display = 'block'
            document.getElementById("cityP").innerHTML = val
            client();
            style();
            country();
            document.criteria.city.onChange = function(){
                  populate();
                  change(this);
      };      };

      if ( nm == 'state' ) {
            document.getElementById("stateP").style.display = 'block'
            document.getElementById("stateP").innerHTML = val
            client();
            style();
            country();
            document.criteria.state.onChange = function(){
                  populate();
                  change(this);
      };      };

ahosang

There are other functions and Array objects referenced for which we have no code. Could you give us a link to this, so we can debug easily?

kellybelly

ASKER

local.colite.com/web/led/locator.asp

it's very complicated code (sorry) - it's javascript written by ASP with live info from databases. The code you are looking for should be around line # 750

kellybelly

ASKER

Please help. I still need to figure out why the function reads the second outside function call, but not the first (it sees change() but bot populate()).

ahosang

I get an error here in the showPhoto function:
str.replace([\/], "\/");

and I get populate is not defined, so the function has some error I guess.

kellybelly

ASKER

let me upload some new code - sorry I had uploaded some bad code.