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.
kellybellyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ahosangFinance Systems DeveloperCommented:
No idea if onclick works for options in IE, but it does for Mozilla of course, but in any case the syntax should be something like:
document.criteria.client.options[document.criteria.client.options.length - 1].onClick=function() {
  populate();
  change(this);
};
Like I said maybe onclick doesn't work for earlier IE(maybe still doesn't) but that's the syntax.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kellybellyAuthor Commented:
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.
ahosangFinance Systems DeveloperCommented:
Show small sample of code that doesn't work, or post a link
Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

kellybellyAuthor Commented:
//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);
      };      };
ahosangFinance Systems DeveloperCommented:
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?
kellybellyAuthor Commented:
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
kellybellyAuthor Commented:
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()).
ahosangFinance Systems DeveloperCommented:
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.
kellybellyAuthor Commented:
let me upload some new code - sorry I had uploaded some bad code.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.