Funktion in einer Funktion

[mansarak]

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]

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() method - 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.