[javascript] 1e keer klik=fout 2e keer=goed*

[Verwijderd]

Allereerst mijn excuses voor de topictitle, ik kon geen andere beschrijving bedenken.

//edit er komt een 2e deel ! momentje svp

De situatie:

Apache v1.3,
PHP v4.3.1,
MySQL v3.23.56-nt,
Windows 2000 Server
Een delphi programmeur met beperkte Javascript ervaring

PHP maakt gebruik van de .dll (dus geen .cgi)

Probleem:

ik gebruik de onclick events van de <SELECT> tag om, afhankelijk van de gekozen items, een div te laten zien of niet. Wat er misgaat is dat hij bij de 1^e klik een foutmelding geeft, 'object does not support this property or method'. Bij de 2^e keer klikken werkt het echter zoals bedoeld.

Wat wil ik doen?

Ik wil de gebruiker uit een aantal listboxen (<SELECT multiple>) een keuze laten 'doorschuiven' naar een en dezelfde listbox (=doelbox). De bedoeling is de gebruiker op deze manier makkelijk een aantal items te laten selecteren. Een item mag maar 1 keer voorkomen in de doelbox, en moet te verwijderen zijn.

Hoe doe ik dit?

Java:

// deze functie zet de zichtbaarheid van een div om
function toggleVisible(szDivID, iState) // 1 visible, 0 hidden
 { 
   var obj = document.getElementById(szDivID);
   obj.style.visibility = iState ? "visible" : "hidden";} 

function toggleDivVisible(objSource)    
{
  var cMicro= objSource.options[objSource.selectedIndex].text;   
   toggleVisible(cMicro,1);
   for (nOption = 0; nOption < objSource.options.length; nOption++)
     if (objSource.options[nOption].selected == false)
       toggleVisible(objSource.options[nOption].text,0); 
}

HTML:

<div name="1">
  hier staat dan weer eens select, behorende bij optie 1
</div>
<div name="2">
   hier staat een select, behorende bij optie 2
</div>
<div name=mainselect>
  <select multiple onClick="toggledivvisible(this)">
    <option  value="1">1</option>
    <option  value="2">2</option>
  </select>  
</div>

Wat doe ik fout?

[ Voor 102% gewijzigd door Verwijderd op 06-04-2003 21:55 ]

[marty]

in je html gedeelte schrijf je toggledivvisible(this) zonder hoofdletter V, ik kan er naast zitten (want ben ook niet zo kundig qua javascript), maar volgens mij is dat qua functies ook hoofdletter gevoelig.

verder:
- hiervoor moet je bij de buren in /13 zijn
- gebruik mozilla (phoenix), daar zit een javascript console in die wat betere foutmeldingen geeft dan is het niet naar een speld in een hooiberg zoeken, want die foutmeldingen kan door 1001 dingen worden veroorzaakt

[ Voor 7% gewijzigd door marty op 06-04-2003 22:33 ]

[dusty]

Welke regel geeft precies de property fout?

(Titel [PHP] verwijderd aangezien dit verder niets met PHP te maken heeft.)

En een move naar W&G aangezien dit over javascript gaat

[ Voor 66% gewijzigd door dusty op 06-04-2003 22:46 ]

[crisp]

HTML:

<div name="1">

a) een name != id, terwijl je wel getElementById gebruikt om 'm aan te spreken (dit werkt volgens mij wel in IE, maar andere browsers zullen dit niet accepteren)
b) name en id attributes mogen niet met een cijfer beginnen

en wat marty zegt klopt ook; een functienaam is casesensitive

verder is onchange waarschijnlijk beter passend dan onclick

[ Voor 13% gewijzigd door crisp op 06-04-2003 23:51 ]

[Verwijderd]

Dat case-sensetive gebeuren klopt, is typo.. ik heb de code ietwat gecondenseerd weergegeven hier. Daar komt ook gelijk het name != id verhaaltje naar boven.

Dat onChange beter is, ben ik het mee eens.. die had ik eerst ook, maar later gewijzigd vanwege deze problemen.

Inmiddels heb ik de oplossing zelf al gevonden.. het probleem zat hem in het feit dat er default geen optie geselecteerd is, en de onclick event blijkbaar een onbeforeclick event is. Dus op het moment van de 1e klik is er nooit iets geselecteerd, en dat geeft deze melding. Dit kan ik op twee manieren oplossen, 1) zorgen dat er iets geselecteerd is (<OPTION selecte></OPTION>) of 2) kijken of de selectedindex iets oplevert.

[crisp]

waarom dan niet gewoon zo:

JavaScript:

function toggleDivVisible(objSource)     
{ 
  for (nOption = 0; nOption < objSource.options.length; nOption++)
  {
    toggleVisible(objSource.options[nOption].text, objSource.options[nOption].selected);  
  }
}

en let ook even op puntje b)

[ Voor 5% gewijzigd door crisp op 07-04-2003 01:12 ]