Hallo Rolf
<fieldset id="selbstabholung">
<label><input name="a" type="radio" value="Ja" />Ja</label>
<label><input name="a" type="radio" value="Nein" />Nein</label>
</fieldset>
Script-Fragment:
registerRadioListener("selbstabholung", radioChanged);
function registerRadioListener(id, func) {
var set = document.getElementById(id);
if (set !== null)
set.querySelectorAll("input").forEach(function(r) {
r.addEventListener("change", func);
});
}
function radioChanged(evt) {
var rb = evt.target;
alert(rb.name+"="+rb.value);
}
Es sollte nicht unerwähnt bleiben, dass die Methode forEach für NodeLists gegenwärtig noch nicht von allen relevanten Browsern unterstützt wird. Das gleiche gilt für die Implementierung des Iterationsprotokolls und die Methoden entries, keys und values.
Man könnte natürlich ein Polyfill einfügen oder anders über die Liste iterieren, aber ich denke nicht, dass das im vorliegenden Fall sinnvoll wäre. Eigentlich gibt es hier nämlich keinen Grund, überhaupt mehrere Eventhandler zu registrieren, und entsprechend auch keinen Grund, über die Radiobuttons zu iterieren.
document.getElementById('selbstabholung').addEventListener('change', function (event) {
alert(event.target.name + ' = ' + event.target.value);
});
Statt also für jeden einzelnen Radiobutton einen Eventhandler zu registrieren, könnte change an ein gemeinsames Elternelement delegiert werden. Zum Beispiel an das fieldset-Element. Das Element bei dem das Ereignis eingetreten ist wird — wie in deiner Rückruffunktion auch — über die Eigenschaft event.target referenziert.
Wenn für mehrere Elemente der gleiche oder der selbe Eventhandler registriert wird, dann ist das meist ein sicheres Zeichen dafür, dass man besser Event Delegation nutzen sollte.
Darüber hinaus wäre zu überlegen, ob die bedingte Anweisung in deinem Beispiel wirklich sinnvoll ist. Abgesehen davon, dass die explizite Prüfung auf ungleich null unnötig ist und man außer bei Einzeilern lieber Klammern setzen sollte, wäre es vielleicht besser die Registrierung des Eventhandlers nicht auf diese Weise abzusichern.
Wenn man sich verschrieben hat oder irgendwas am relevanten Markup ändert, dann kommt andernfalls direkt ein Typfehler und das Problem kann leicht behoben werden. Wird der Fall jedoch wie in deinem Beispiel abgefangen, dann wird einfach kein Handler registriert, und es ist nicht so offensichtlich woran es liegen könnte, dass am Ende nicht das gewünschte Ergebnis herauskommt.
Was hier die beste Vorgehensweise ist, lässt sich aber wohl nicht so ohne weiteres beantworten, weshalb ich das nicht als Kritik, sondern nur als Anmerkung verstanden wissen möchte.
Vor dem Hintergrund, dass Becca ihre Eventhandler bislang offenbar über HTML-Attribute registriert hat, erscheint es mir noch erwähnenswert, dass es bei der von dir dankenswerterweise eingebrachten Methode addEventListener darauf ankommt, wann das Script ausgeführt wird.
Der von dir verlinkte Abschnitt im Wiki geht auf diese Problematik nicht ein und hierbei handelt es sich um eine beliebte Fehlerquelle. Es ist also zu beachten, dass der Code mit dem Elemente referenziert werden erst dann ausgeführt wird, wenn das Markup fertig geparst wurde.
Zu diesem Zweck kann der entsprechende Code beispielsweise in einen Eventhandler für das Ereignis DOMContentLoaded gepackt werden, den man für das Objekt window registriert. Oder man notiert das Script einfach am Ende vom body. Auf diese Weise ist sichergestellt, dass zum Zeitpunkt der Ausführung alle Elemente in ihre Objektrepräsentation überführt wurden.
Viele Grüße,
Orlok
nicht angemeldet
Gunnar Bittersmann
TS
Rolf b
Orlok
Tabellenkalk