Event LIstener before Dark Mode Function

Question

Shure quite simple but it struggles me. I'm asked to put a Dark Mode Button in my Nav-Bar, which turns Dark Mode on and off.

I found a solution for that, but now I have to implement it into the EventListener that looks like this:

document.addEventListener("DOMContentLoaded" , () => {
  
//insert your code here

});

My Script looks like this:

    function DarkModeFunktion() {
        var element = document.body;
        element.classList.toggle("dark-mode");
    };

//works just fine

I put my code into the given Space and it looked like this:

document.addEventListener("DOMContentLoaded" , () => {
  
function DarkModeFunktion() {
        var element = document.body;
        element.classList.toggle("dark-mode");
    };

});

//does nothing

As I just started learning how to code I realy could use some help here. The given explanations are poorely giving any advice.

Answer 1

You don't call function DarkModeFunktion in event handler method

document.addEventListener("DOMContentLoaded" , () => {
    //defintion
    function DarkModeFunktion() {
           var element = document.body;
            element.classList.toggle("dark-mode");
        };

    }
    //you don't call it
);

First solution - just call defined function:

document.addEventListener("DOMContentLoaded" , () => {
    //defintion
    function DarkModeFunktion() {
           const element = document.body;
           element.classList.toggle("dark-mode");
        };

    }
    DarkModeFunktion()
);

Two - define it outside and call it (preferred):

function DarkModeFunktion() {
        const element = document.body;
        element.classList.toggle("dark-mode");
    };
}
document.addEventListener("DOMContentLoaded" , () => {DarkModeFunktion());
//or
document.addEventListener("DOMContentLoaded" , DarkModeFunktion);

Three - just define your code in handler assinge:

document.addEventListener("DOMContentLoaded" , () => {
   const element = document.body;
   element.classList.toggle("dark-mode");
);

EDIT.

What's more as point @Tom Bailey you can't call function DarkModeFunktion from outside events (button links etc...) because you defined in scope of DOMContentLoaded handler function so it doesn't' live in global scope so you can't access it.