Rolf B: Textfelder ein- bzw. ausblenden

Beitrag lesen

Hallo Frank,

du hast einige subtile Fehler drin. Öffne die Entwicklungswerkzeuge deines Browsers und es wird hageln :)

  • Dein Script steht HINTER den Elementen, von denen es verwendet wird, und darum funktioniert das Setzen der onchange-Attribute nicht. Verwende statt dessen einen DOMContentLoaded-Handler und ordne den Event-Handler für change darin mit addEventListener zu.
  • Du musst das change-Event auf dem select registrieren, nicht auf den Options.
  • Das zweite 1D-Code Element hat die ID 2-1D-code statt 2-1D-Code und wird darum von den getElementById nicht gefunden.
  • Wenn du mit addEventListener arbeitest, bekommt die Handler-Funktion ein event-Objekt mit. In event.target steht das HTML Element, für das der change ausgelöst wird. Du kannst also sofort event.target.value testen und musst es nicht mit getElementById suchen.
  • Statt einer if-Kette, in der Du jedesmal das Element neu suchst, könntest Du auch einen switch-Befehl verwenden.
  • display:hidden gibt's nicht. Das heißt display='none'
  • display:block ist schlecht für Input-Elemente. Nimm display='' um den Default wiederherzustellen.
  • Du brauchst noch eine Logik für den Anfangszustand. Du solltest die Auswahl-Funktion zerlegen, so dass Du eine eigene Funktion für die Sichtbarkeitssteuerung hast, die den aktuell ausgewählten Wert bekommt, keinen Verweis auf ein HTML Element. Dann kannst Du sie im Event-Handler mit dem Wert von event.target.value aufrufen und im ready-Handler mit dem aktuellen Wert des SELECT (bzw. mit "1", weil Du das ja voreinstellst)
  • Helper-Funktionen machen das Leben leichter. Mein JavaScript für dein HTML sieht so aus. Irgendwelche on-Attribute im HTML gibt's dann nicht mehr. Man nennt das unobtrusive JavaScript, d.h. der Script-Anteil ist im HTML komplett unsichtbar.
document.addEventListener('DOMContentLoaded', function() {
   var selector = document.getElementById("Label");
   selector.addEventListener('change', function(evt) {Auswahl(evt.target.value)});
   Auswahl(selector.value);
})

function Auswahl (wert) 
{
   switch (wert) {
	 case '1': SteuereInput(true, 0);
             break;
	 case '2': SteuereInput(false, 1);
             break;
	 case '3': SteuereInput(false, 2);
             break;
	 case '4': SteuereInput(false, 3);
             break;
	 case '5': SteuereInput(true, 3);
             break;
   }
}

function SteuereInput(matrix, numId) {
   document.getElementById("Datamatrix").style.display = matrix ? "" : "none";
   document.getElementById("1-1D-Code").style.display = numId > 0 ? "" : "none";
   document.getElementById("2-1D-Code").style.display = numId > 1 ? "" : "none";
   document.getElementById("3-1D-Code").style.display = numId > 2 ? "" : "none";
}

Rolf

--
Dosen sind silbern