per CSS oder javascript automatisch Code an div anhängen
bearbeitet von Gunnar Bittersmann@@Marvin Esse
> ~~~javascript, bad
> var image = document.createElement("img");
> image.src = "info.gif";
> image.id = "pic";
> image.onclick = "test();";
> r.appendChild(image);
> ~~~
>
> Zwei Probleme habe ich aber noch dabei:
Plus eins, was du noch gar nicht erkannt hast.
Ein `img`-Element (ohne `map`) ist nicht (von Haus aus) interaktiv bedienbar. Wenn du dem einen `click`-Eventhandler zuweist, vergisst du, dass Nutzer deine Seiten auch anders nutzen als mit Mäusen. Navigation mit der Tastatur beispielsweise. Man könnte das `img`-Element so nachrüsten, dass es auch mit der Tastatur anwählbar ist und auch dass Screenreader-Nutzern dessen Funktion mitgeteilt wird – das wäre aber aufwendig.
Sinnvoller ist es, die im Browser bereits vorhandenen Möglichkeiten zu nutzen und die von HTML dafür vorgesehenen Elemente zu nutzen:
* Wenn das Bild eine Aktion auf der Seite auslösen soll, dann gehört es in ein `button`-Element. Diesem kannst du dann einen `click`-Eventhandler zuweisen.
* Wenn das Bild ein Link zu einer anderen Ressource (bzw. einer anderen Stelle im aktuellen Dokument) sein soll, dann gehört es in ein `a`-Element.
`image.onclick`{: .language-js.block.bad style="display: inline"} ist nicht zielführend.
LLAP 🖖
PS: `` `image.onclick`{: .language-js.block.bad style="display: inline"}``{: .language-markdown} – Kann ich darauf stolz sein, wie ich den Bugs im Forum-Stylesheet ein Schnippchen schlage?
--
_„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“_ —Johann Wolfgang von Goethe