黑暗模式功能之前的事件监听器

Question

Shure 很简单，但它让我很纠结。我被要求在我的 Nav-Bar 中放置一个深色模式按钮，用于打开和关闭深色模式。

我找到了解决方案，但现在我必须将其实施到 EventListener 中，如下所示：

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

});

我的脚本如下所示：

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

//works just fine

我将我的代码放入给定的 Space 中，它看起来像这样：

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

});

//does nothing

因为我刚刚开始学习如何编码，所以我真的需要一些帮助。给出的解释很糟糕，没有给出任何建议。

Answer 1

您正在侦听的事件“DOMContentLoaded”在页面加载时触发。您实际上想在 'button pressed' 事件上调用您的函数。您可以在 HTML:

中按照以下方式轻松完成此操作

<button onclick="DarkModeFunktion()">Toggle Dark Mode</button>

我还建议将您的函数重命名为 ToggleDarkMode 以明确其作用。

Answer 2

您没有在事件处理程序方法中调用函数 DarkModeFunktion

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

    }
    //you don't call it
);

第一个解决方案 - 只需调用定义的函数：

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

    }
    DarkModeFunktion()
);

二-在外面定义并调用（首选）：

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

三 - 只需在处理程序 assinge 中定义您的代码：

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

编辑。

更重要的是@Tom Bailey 你不能从外部事件（按钮链接等...）调用函数 DarkModeFunktion 因为你在 DOMContentLoaded 处理函数的范围内定义所以它不存在于全局范围内所以你无法访问它。

黑暗模式功能之前的事件监听器

Event LIstener before Dark Mode Function

event-listener

typescript

darkmode