[FRAGE] onChange - div visible

[Mahribar]

Guten Abend,

ich habe ein kleines Problem mit einem meiner Skripts.
Ziel des Skript ist es, nach auswahl einer Option eines Select´s, je nach value einen bestimmten Div-Container sichtbar zu machen und einen eventuell vorher ausgewählten wieder unsichtbar.
Dazu habe ich mir ein kleines JavaScript geschrieben, das so aber nicht wirklich funktionieren will.
Der Fehler auf der Console lautet "TypeError: formDivs.substring is undefined".

Ich sehe derzeit den Wald vor lauter Bäumen nicht mehr, und da ich nicht allzu bewandert mit JS bin, erhoffe ich mir auf diesem Wege Hilfe von euch.
Kann mir einer sagen, wo mein Denkfehler ist?

So long,
Mahribar

HTML:

<div class="aFormSelect">
            <select name="klasse" id="options" onchange="anmeldungOptionCheck();">
                <option value="1" selected>------------- Bitte wählen -------------</option>
                <option value="2">Barde</option>
                <option value="3">Magie: Kundiger</option>
                <option value="4">Magie: Lehrling</option>
                <option value="5">Magie: Rangmagier</option>
                <option value="6">Magie: Meistermagier</option>
                <option value="7">Waldläufer</option>
            </select>
        </div>

<div id="aFormWrapper">
        <div id="form1">Nix ausgewählt!</div>
        <div id="form2">Barde</div>
        <div id="form3">Magie: Kundiger</div>
        <div id="form4">Magie: Lehrling</div>
        <div id="form5">Magie: Rangmagier</div>
        <div id="form6">Magie: Meistermagier</div>
        <div id="form7">Waldläufer</div>
    </div>

CSS:

#aFormWrapper {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

JavaScript:

function anmeldungOptionCheck()
{
  var i;
  var optionValue = document.getElementById("options").value;
  
  


  var formWrapper = document.getElementById("aFormWrapper");
  var formDivs = formWrapper.getElementsByTagName("div");

  // Loop through all the form divs.
  for (i=0; i<formDivs.length; i++) {
    // Parse out the numeric portion of this form div's id.
    console.log(formDivs[i]);
    var formIndex = formDivs[i].substring[4];

    // If we found our div, highlight it.
    if (formIndex === optionIndex) {
      formDivs[i].className = "visible";
    }
    // Otherwise, we should make sure it's hidden,
    // in case it was the previous selection.
    else {
      formDivs[i].className = "";
    } 
  }
}

 

[mikdoe]

Das formDivs[i] ist in der betreffenden Zeile ein HTML Objekt, nämlich das div in der div's-Collection an Position [i]. Darauf kann man kein substring() anwenden, denn das ist eine Funktion für Strings, nicht für ein HTML Objekt. Außerdem schreibt man die Parameterklammer von Kommandos meistens mit runden Klammern und nicht mit eckigern.
Versuch mal stattdessen var formIndex = formDivs[i].id.substr(4);

Und ob unten das formDivs[i].className = ""; korrekt ist, da bin ich unsicher. Teste das ganze Skript bitte in allen Browsern die es können sollen! Gerade beim Entfernen von CSS Klassen unterscheiden sich die Browser, wenn ich das richtig im Kopf habe. Oder zumindest war das früher so. Wäre übrigens eine schöne Anwendung für jQuery, das ist spezialisiert auf Crossbrowser Unterstützung.

 

[Mahribar]

Hallo mikdoe,

auch substring(4) brachte keine Lösung. Da gabs lediglich ne Fehlermeldung alá "substring() is not a function".
Ich habe mein Skript mittlerweile auf anderem Wege realisiert:

JavaScript:

function anmeldungOptionCheck() {
    var i, len, optionVal, formDiv,
        selectOptions = document.getElementById("options");

    // loop through the options in case there
    // are multiple selected values
    for (i = 0, len = selectOptions.options.length; i < len; i++) {
        
        // get the selected option value
        optionVal = selectOptions.options[i].value;
        
        // find the corresponding form div
        formDiv = document.getElementById("form" + optionVal);
        
        // move on if we didn't find one
        if (!formDiv) { continue; }
        
        // set CSS classes to show/hide form div
        if (selectOptions.options[i].selected) {
            formDiv.className = "visible";
        } else {
            formDiv.className = "invisible";
        }
    }    
}

CSS

.invisible {
    display: none;
}

.visible {
    display: block;
}

Danke für deine Antwort!
Mahribar

 

[mikdoe]

auch substring(4) brachte keine Lösung

Hattest du das .id davor auch gesehen?