帶復選框的暗模式開關按鈕

Question

Console.logs 沒有顯示。 而且我的功能不起作用。 我嘗試了幾種不同的功能和解決方案，但沒有一個對我有用。 問題出在哪里，誰能幫忙？

這是我的 html

<div class="switch-toggle darkmodecheckbox">
              <input type="checkbox" name="checkbox" id="darkmodeonoff" />
              <label for="darkmodeonoff"></label>
            </div>

這是我的 js；

var checkbox = document.querySelector("input[name=checkbox]");
    console.log(checkbox);

    checkbox.addEventListener("change", (e) => {
      if (e.target.checked) {
        darkmode();
        console.log("Checkbox is checked..");
      } else {
        darkmodeoff();
        console.log("Checkbox is not checked..");
      }
    });

Answer 1

兄弟你的 darkmode() 和 darkmodeoff() 函數在哪里？ 嘗試在下面添加它們，然后檢查您是否會收到任何警報？ 另外，如果您在控制台上看到任何警告，請分享

 const darkmode = () =>{
        alert('dark')
    }
    const darkmodeoff = () =>{
        alert('light')
    }

Answer 2

嘗試使用classList.toggle ：

checkbox.addEventListener("change", (e) => {
      const example = document.querySelector('.containerThatYouWantUse')
      example.classList.toggle('darkModeClass')
    });

Answer 3

你可以讓 darkmode 和 darkmodeoff 記錄你想要的

const darkmode = () =>{
    console.log("Checkbox is checked..");
}
const darkmodeoff = () =>{
    console.log("Checkbox is not checked..");
}

然后使用 if 語句調用它

if (e.target.checked) {
    darkmode();
  } else {
    darkmodeoff();
  }
});