# Funktion in einer Funktion



## mansarak (20. Dez 2022)

Hey, ich hab neu mit JavaScript angefangen und bräuchte Hilfe


```
<div id="beides" onclick="alle()">Unterbodenbeleuchtung + Scheinwerfer</div>

function alle () {
                document.getElementById("beides").innerHTML = "<div id='ausschalter' onclick='knopf()'>Beleuchtung ausschalten</div> <img src =\"scheinwerfer2.png\" id='lichtergemeinsam'> <img src =\"beleuchtung2.png\" id='ledgemeinsam'>";
            }
            
function knopf () {
                document.getElementById("ausschalter").innerHTML = "Unterbodenbeleuchtung + Scheinwerfer";
            }
```

Also ich möchte, dass man auf den div "Unterbodenbeleuchtung + Scheinwerfer" klicken kann und ein Bild und gleichzeitig ein div "Beleuchtung ausschalten" erscheint.
Danach möchte ich, dass wenn man auf "Beleuchtung ausschalten" klickt, die Bilder verschwinden und wieder "Unterbodenbeleuchtung + Scheinwerfer" steht.
Die erste Funktion funktioniert, doch wenn ich eben ein zweites mal drauf klicke passiert nichts.

Danke im voraus!


----------



## Oneixee5 (20. Dez 2022)

Man muss den Listener so hinzufügen:

```
document.getElementById("beides").innerHTML = "<div id='ausschalter'>...";
const el = document.getElementById("ausschalter");
el.addEventListener("click", knopf, false);
```









						EventTarget.addEventListener() - Web APIs | MDN
					

The addEventListener() method of the EventTarget interface   sets up a function that will be called whenever the specified event is delivered to the target.




					developer.mozilla.org
				



Man kann das noch optimieren, wenn man nicht immer bei document anfängt die Elemente zu suchen, sondern sich die Elemente merkt und direkt darauf operiert.


----------

