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
Dosen sind silbern