[JavaScript] functie of variabele kan niet gevonden worden

[_eXistenZ_]

Ik ben bezig met een simpel javascriptje die mootools gebruikt waarbij je een race en daarna een class kan kiezen;

JavaScript:

window.addEvent('domready', function(){

  var container = $('container');
  var title = $('title');
  var settings = $('settings');
  var info = $('info');
  var racedata = '';
  var classdata = '';
  var raceoptions = '';
  var classoptions = '';

  function fillDropDown(data, dropdown) {
    var dropdown = $(dropdown);
    dropdown.empty();
    data.each(function(thisdata) {
      var option = new Element('option');
      option.setProperty("value", thisdata.value);
      option.setHTML(thisdata.text);
      dropdown.adopt(option);
    });
  };

  function step1() {
    if (racedata == '') {
      new Json.Remote('ajax/character.php?action=getraces', {
        onComplete: function(jsonObj) {
          if (jsonObj.error) {
            alert('An error has occured: ' + jsonObj.error);
          } else if (jsonObj.races) {
            racedata = jsonObj.races;
            step1();
          };
        },
        onFailure: function() {
          alert('Something went wrong');
        }
      }).send();
    } else if (classdata == '') {
      new Json.Remote('ajax/character.php?action=getclasses', {
        onComplete: function(jsonObj) {
          if (jsonObj.error) {
            alert('An error has occured: ' + jsonObj.error);
          } else if (jsonObj.classes) {
            classdata = jsonObj.classes;
            step1();
          };
        },
        onFailure: function() {
          alert('Something went wrong');
        }
      }).send();
    } else {
      fillDropDown(racedata, 'input_raceoptions');
      $('input_raceoptions').setProperty('onchange', "fillDropDown(classdata[this], 'input_classoptions')");
    }
  };

  step1();

});

In mijn html zit een dropdown met het id input_raceoptions, zodra ik in Firefox een andere keuze kies in deze dropdown krijg ik in Firebug de volgende fout:

fillDropDown is not defined

Verander ik op regel 54 de onchange naar this.filDropDown() kan de functie gevonden worden maar krijg ik de error

classdata is not defined

Verander ik tenslotte op regel 54 classdata naar this.classdata, krijg ik de error

this.classdata has no properties

Ik heb ook geprobeerd de functies en de variabelen buiten de ondomready te zetten maar dan kan de functie fillDropDown de variabelen niet vinden... Volgens mij doe ik iets gronisch fout met globals / scopes oid...

[ Voor 6% gewijzigd door _eXistenZ_ op 05-05-2008 21:27 ]

[Verwijderd]

Je probleem is dit:

JavaScript:

$('input_raceoptions').setProperty(
    'onchange', 
    "fillDropDown(classdata[this], 'input_classoptions')"
);

Omdat je de handler hier als string definieert raak je de locale scope kwijt waarin je fillDropDown hebt gedefinieerd. Wat je wil, is de onchange laten uitvoeren binnen dezelfde scope als waarin je 'm definieert:

JavaScript:

$('input_raceoptions').onchange = function() {
    fillDropDown(classdata[this], 'input_classoptions');
};

Ik weet overigens niet zeker of dit gaat werken, dat hangt een beetje af van wat er in classdata komt te staan en wat this moet zijn in die context (wordt nu de <select>).

[ Voor 15% gewijzigd door Verwijderd op 05-05-2008 22:27 ]

[_eXistenZ_]

Verwijderd schreef op maandag 05 mei 2008 @ 22:25:
Ik weet overigens niet zeker of dit gaat werken, dat hangt een beetje af van wat er in classdata komt te staan en wat this moet zijn in die context (wordt nu de <select>).

JavaScript:

$('input_raceoptions').onchange = function() {
    fillDropDown(classdata[$('input_raceoptions').value], 'input_classoptions');
};

doet de trick dan Iig ik ga m morgen proberen, nu ff slape

/edit

Ik snap m na nog een keer lezen, die this verwijst al naar $('input_raceoptions') door de functie Wat ik zet resulteert dus in hetzeflde als ik je goed begrijp.

[ Voor 47% gewijzigd door _eXistenZ_ op 06-05-2008 00:29 ]